CODEWITHSUNDEEP
htmlcss
kernelpanic
kernelpanic

Reputation: 2956

CSS title underline without the text part

Maybe this has been answered before but I haven't found a proper solution for my question on SO.

Ok, here goes:

I need to underline an h3 tag with 100% EXCEPT for the part where the actual text is. like so:

My super title ____________________________________________________

This has to be 100% width, so something like

h3:after {
        content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}

with fixed number whitespaces wouldn't work.

Also the tag has to be pure. Meaning it is not surrounded with DIVs or span etc... (User submitted content from wysiwyg) It's just an h3 tag.

Is this possible in css3 at all? If not I'm willing to add some js to make it work.

UPDATE:

Here's a screenshot with expected result:

enter image description here

Upvotes: 1

Views: 620

Answers (4)

Broxzier
Broxzier

Reputation: 2949

Without using the :after pseudo element, you could do this:

<div id="wraptitle"><h3>A Second Title</h3></div>

CSS

#wraptitle {
    border-bottom : 1px solid black;
    position : relative;
}

#wraptitle h3 {
    display : inline;
    position : relative;
    bottom : 0;
    border-bottom : 1px solid white; /* white is actually the background color */
    padding-right : 10px;
}

Make sure margin of the h3 element is set to 0, or its border wouldn't go over it.

A live example can be seen here: http://jsfiddle.net/JYNn5/

Upvotes: 0

fiskolin
fiskolin

Reputation: 1421

Try this:

CSS

h3 {
    display:block;
    width:100%;
    overflow: hidden;
    position: relative;
}
h3:after {
    content:'';
    border-bottom:1px solid black;
    position: absolute;
    width: 100%;
}

JSFIDDLE

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you could try in this way:

Markup

<h3>A 100% wide title</h3>

CSS

h3 {
  display: block;
  width: 100%;
  background: #fff;  
  white-space: nowrap;
  overflow: hidden;
}

h3:after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: .5em;
  border-bottom: 1px #767676 solid;
}

Example: http://cdpn.io/Awpef

Resulting effect

enter image description here

Upvotes: 5

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Like this? demo

    h3:after {
    content:"";

    border-bottom: 1px solid black;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    position: relative;
    left: 150px;
    top: -20px;

}

Upvotes: 0

Related Questions