CODEWITHSUNDEEP
csselement
sqe
sqe

Reputation: 1716

adding line break on pseudo element

After each h2 I want to append and style a dash and after that a line break.

I tried the following:

h2:after {
    content: '\A\2014';
    white-space: pre;
    font-size: 70px;
}

It does work in general, but when I in- or decrease the font-size, the space both over and under the dash change, instead of just the dash-size.

I also tried adding a line-height: 0.6em; but it seems to move everything around.

At the moment I'm getting this:

At the moment I'm getting this:

I want to get this, being able to change the space:

I want to get this, being able to change the space:

Here is the FIDDLE

Upvotes: 0

Views: 137

Answers (1)

Matthew R.
Matthew R.

Reputation: 4350

Why don't you just use borders?

h2 { border-bottom: 4px solid #000; }

and then you could just adjust the padding on the bottom of the H2:

h2 { padding-bottom: 15px; border-bottom: 4px solid #000; }

UPDATE BASED ON COMMENTS

To keep the dash the same width regardless of the title width I simply styled the :after pseudo element with a border and display block: http://jsfiddle.net/uzVhz/2

Upvotes: 2

Related Questions