RWSmith Designs.

Extraordinary Web Design

Create a simple CSS strike-behind effect.

line-behind-text
A common effect you may have seen on while browsing is a strikethrough, often behind a heading as illustrated above.
A method often used to execute this involves a background image that tiles behind the heading, however here we are going to do it without any images which will result in one less http request from your server. Yay!

The method I’m using is simply a few lines of HTML and some simple CSS.


Firstly the HTML:

Above we defined a div and gave it a class of “strike”. Nested inside of the parent div element is the header “h2″

Now lets style that with some CSS

Above we’ve positioned the container div, you’ll see why later and aligned the contents – in this instance the heading, to the center.

Here we’ve created a pseudo element to the container div. This will be the strikethrough.
We’ve given it a position of absolute and with it’s parent div positioned we can now easily position this pseudo element relative to it.
values of 0 for left and right will force it to span the full width of it’s parent, and the top property of 50% will position it vertically center to the div.
We will make the line 1px wide, content of null and black background.

Lastly we shall give the header some styling.
Firstly by default a heading is a block level element and will span the full width of it’s parent block. To change this we change the display property to inline so it now spans the width of the text contained within.
Next I set the position property to relative, this is to allow me to give the element a z-index of 1. Z index only works on positioned elements and we have to ensure the heading lies on-top of the strike.
We remove the browser default margins for the header.
Applying padding to the left and right of the header visually shifts the strike further away
Now we give it a white background, this covers the section of the strike that the header covers making it appear like there are strikes either side.

So there we have it, a simple strike through that can be re-used throughout your project.

If you wish to add anything or know of a better method for achieving this effect please comment below.

Comments

Leave a comment

Your email address will not be published. Required fields are marked *

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process