I've created a sprite at a website I'm using to learn CSS at http://flexibletheme.tumblr.com/, however since the width is set at 24px the text tries to make a small vertical column.
Anyway to get it to render normally with 24px of margin on the right?
You should put your sprite inside of a nested <span> instead of wrapping it around your link text. Like this:
<span class="sprite"></span>Sample Link
Be sure to either float your sprite to the left or make it display:inline-block; so that it can retain a width and height but still be inline with your link text.
ditch the width:24px; add padding-left:24px
You should wrap the element around your sidebar unordered list and children instead of closing it before it does anything:
<aside>
<ul>
<li>stuff</li>
</ul>
</aside>
Then give it a width, or let content and sidebar float and clear them after. (I'd also recommend looking into stuff like grids for ease.. http://978.gs/)
write this white-space: nowrap; in your a tag
#links li a{white-space: nowrap;}
If IE7 support (and below) is not an issue, you could use :before pseudo element without adding any extra mark-up:
#links a {
display: block;
position: relative;
padding: 2px 2px 2px 30px;
min-height: 20px;
line-height: 24px;
}
#links a:before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 24px;
height: 24px;
background: url(http://static.tumblr.com/wgijwsy/itFlt1l8x/links.png);
}
a#rss:before { background-position: -24px 0 }
a#facebook:before { background-position: 0 -24px }
a#twitter:before { background-position: 0 -48px }
Otherwise, add span inside the anchors and replace a:before with a span.icon.
And move the h2 outside of your ul. That's invalid HTML.
Related
Summary / Nutshell
Is it possible to have a full width (display: block) clickable hyperlink HTML element that has a unique, positioned sprite background image class, all in just one HTML <a> element?
Background
Currently I have a working elaborate HTML menu, whereby each hyperlink has its own unique icon sprite background position.
The sprite icons each have their own unique class, which is added on top of the default menu class that holds the background url and general layout. All icons are exaclty the same size, 13 x 13 px. Each hyperlink has a full with using display:block. The mouse hover must be activated as soon as the block width is hovered, sothat short text or long text hyperlinks get a equal full width hover color.
SPRITES CSS
.home {background-position:0 -13px}
.about {background-position:0 -1638px}
.ethos {background-position:0 -2944px}
.etcet {background-position:0 -5611px}
GENERAL CSS
li a{
display: block;
line-height: 2em;
color: black;
padding: 10px 1em 10px 2em;
}
.menu{
display: inline-block;
background: url(icons.png) no-repeat;
width: 13px; height: 13px;
vertical-align: middle;
margin: -2px 15px 0px -29px;
}
Currently the following undesired bloated HTML markup works...
Undesired: Bloated HTML
<li>
<a href="/home">
<p class="menu home"></p> Home
</a>
</li>
... but I wonder if it would be possible to reduce that (without losing any of the essential functionality) to the absolute bare minimum HTML:
Desired: Minimal HTML
Home
New CSS
a{
position: relative;
padding: 0 0 0 1em;
}
a:before{
content:'';
position: absolute;
background-image: url(icons.png);
background-repeat: no-repeat;
top: .75em;
left: 2px;
height: 13px;
width: 13px;
}
Stuck setting the unique background-position
I tried the a:before{} workaround and while the background icon boxes are positioned nicely relative to the hyperlinks, and the full width mouse hover works too, the sprites themselves are all from the initial starting pivot of x=0 y=0 of the background image!
In other words all the sprite icons are take from the first block of the sprite background png file. The unique individual class names do not seem to have been used for the background-position when using a:before{}.
If I move the background-image from a:before{} to a{}, then the layout breaks completely beyond repair.
In summary, is there a way to make a one-element HTML work with sprites on hyperlinks, using just a:before{} without necessitating any extra meaningless html elements such as <spans> or <p>, and achieve all the essentials of sprites positioning and full with block hoverability?
Any and all help is greatly appreciated!
You need to add pseudo-class to your customization classes.
I've added an image how it works. It's explains more better, than hundreds of words.
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
Also, if you have a simple menu, remove ul, li tags and wrap all links in a nav tag.
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
nav {
display: inline-flex;
flex-flow: column;
}
a {
position: relative;
padding: 0 1.3rem;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:before {
content: '';
position: absolute;
background-image: url('https://i.ibb.co/M7008LV/sprite.png');
background-repeat: no-repeat;
top: 50%;
left: 2px;
height: 13px;
width: 15px;
transform: translateY(-50%);
}
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
a:hover {
background-color: #ffd73d;
}
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
The menu of options taht should appear after you click on the hamburger menu is
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
but I'm unclear how to set up the style of the hamburger menu so taht it appears directly under the hamburger menu when you click on it. Right now, its appearing centered at the top of the screen -- https://jsfiddle.net/wtp1k57b/1/ . How do I set up such a style?
PS - I'm looking for a solution that doesn't rely on hard-coding numeric (e.g. top: 27px) pixel values. Certainly its good to get things to work in my little Fiddle, but in my broader application I can't guarantee how big or small that hamburger menu will be.
I would like to show a completely different approach without using display: flex.
HTML
Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.
Hence, as #scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.
CSS
First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.
Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).
As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.
As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.
Final Solution
This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
header {
width: 100%;
background-color: orange;
text-align: center;
padding: 1rem;
position: relative;
}
nav {
display: none;
width: 30rem;
padding: 5rem;
background-color: #ededed;
position: absolute;
right: 5%;
top: 100%;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: center;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 2.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
.menu-btn {
position: absolute;
right: 5%;
top: 50%;
margin-top: -1.1rem;
display: inline-block;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
}
#media only screen and (min-width: 500px) {
.menu-btn, nav {
display: none !important;
}
}
.menu-btn span {
display: block;
width: 2rem;
height: 0.2rem;
margin: 0.4rem 0;
background: #989da1;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Page Title</h2>
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<nav>
Vote
Search
About
Log In
</nav>
</header>
Or see this fiddle.
Use the css properties: top and right to set the position of the element under your icon.
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
Use this CSS for your menu - no margin, and the position defined by the top and right settings:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 50px;
right: 0;
}
https://jsfiddle.net/meuexde6/
I left out the transition for the testing, but you should basically animate the right parameter from -100px to 0 to achieve what you seemed to have in mind.
ADDITION AFTER COMMENT:
To define the position of the menu in relation to the button, you have to apply position: relative to their common parent element, .mobile-nav. The position values of an element with position: absolute always relate to the first ancestor which has position: relative.
I changed the values in my updated fiddle accordingly to these:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 40px;
right: -32px;
}
Updated fiddle: https://jsfiddle.net/meuexde6/1/
If you really want the menu to stick directly to the button (hard to say - it has no borders), just adjust the top and right values as needed.
HTML5 Semantic Elements.
details > summary {
padding: 2px 6px;
width:12px;
border: none;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
<summary>☰</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
So, here goes. I know you are asking for a solution to a specific problem, I solved it alright, but I couldn't help noticing that you are struggling with your code. You must simplify the way you think and your code will become leaner. The purpose of this forum is to help others become better, right? :)
HTML
It is good practice to keep the menu toggle button OUTSIDE of the menu - will solve a lot of issues - check below.
It is not semantically right to use anything else rather than a button for the toggle function, so, why not use a button here? I also removed unnecessary clutter from your code, like some divs and the id - the id could be traded with the class, your call. I also removed .mobile-nav because it is not needed at all.
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
I absolutely positioned the menu-btn on the top right corner, and gave it a width equal to the #pageTitle height (which I set at 50px - a gold standard) to keep it rectangular; it should be a rule of thumb that the toggle buttons are rectangular and always the same height as the top navigation bar - in this case the before-mentioned id. The same I did for the .responsive-menu. I absolutely positioned it as shown below. The changes allowed me to remove a lot of css styling - now obsolete - like for example the absolute positioning of the ul menu inside the .responsive-menu.
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
By years of practice I realized that the most efficient way to toggle a menu instead of adding and removing classes is to add a class on the body tag; this can help heaps if you want to restyle anything else on the page depending on wether your menu is opened or not.
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/
I could have done a lot of other things in order to simplify the code even further - remove unnecessary ids and classes since most elements are considered unique and could be targeted using descendant classes, eg .responsive-menu ul, etc. After a lot of practice, you'll manage to think simpler and produce code with a smaller footprint.
Edit: Concerning the fact that you don't like the absolute pixels for alignment here is a trick.
Giving a fixed height to the parent container, equal to the toggle button's -in this case '#pageTitle' and setting its position to relative allows you to use top:100% to properly place the responsive menu exactly below the button (which is essentially the same height):
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
Here is an updated fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
Edit: Natalia, I gave it some thought and here is what I came up with. I created an absolutely positioned .menu-wrapper, inside of which I placed the button and the responsive menu with float:right and no positioning - aka they are positioned statically. No more pixel values! YAY!
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
Here is a working fiddle: https://jsfiddle.net/scooterlord/4atafhge/2/
I have a goal that I'm trying to accomplish with HTML and CSS only: With an inline list of links that grow in size upon hover and change fonts (this has caused odd issues before),
A) Hovering one link shouldn't upset other links.
B) Keep it dynamic to avoid tailoring the CSS to each new link.
C) If margin: 0 20px 0 20px, that should be from the ends of the text -- This looks much cleaner, as it makes the spacing constant between links (see example for what should not be done). Fixed width containers usually violate this.
D) Upon hover, the text should stay vertically and horizontally centered in place.
E) Please try to keep it HTML and CSS only. If it includes JS or JQ, it would be more difficult to implement to to my lack of knowledge about the languages and the fact that the JSFiddle is just a stripped down example instead of my actual page.
My best right now fits the first two and last criteria without meeting the third, and it uses tables (I know):
JSFiddle
Or code:
<table><tr>
<td><div>ONE</div></td>
<td><div>TWO</div></td>
<td><div>THREE</div></td>
<td><div>FOUR</div></td>
<td><div>FIVE</div></td>
</tr></table>
And...
div:hover {
font-size: 130%;
font-family: comic sans ms;
}
div {
width: 10px;
margin: 0 30px 0 30px;
height: 20px;
}
The issue is that the margin is being measured from the div, not the text, making it so I'd have to tailor the margin to each link. Additionally, hovering will make it seem like the font / link moves down and to the right, violating guideline D.
This Works dynamically as long as the text isn't too long, but hovering upsets other links. It also violates D.
Any help would be appreciated.
Vertical alignment for inline text is handled easily with the line-height property. Make sure that for both the normal and large font-sizes the line height is the same. Eg. for normal text I used line-height: 1.5em, for the large text I used font-size: 130%; line-height: 1.15385em;. 1.30 × 1.15385 = 1.50
The main issue I see is that when hovering the browser needs the text in the original size for the layout, but it also needs the text in bigger size for display. One solution I see is duplicating the link text and show only one version depending on hover state:
HTML:
<ul>
<li><span>link 1</span><span>link 1</span>
<li><span>link 2, with some long text</span><span>link 2, with some long text</span>
<li><span>link 3</span><span>link 3</span>
</ul>
CSS:
ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }
li { border: 1px dotted red; position: relative; }
li a span:first-child { padding: 0 30px; }
li a span:last-child { position: absolute; width: 100%; left: 0; font-size: 130%; line-height: 1.15385em; text-align: center; visibility: hidden; }
li:hover a span:first-child { visibility: hidden; }
li:hover a span:last-child { visibility: visible; }
http://jsfiddle.net/g16Ldusx/2/
Instead of duplicating the link text in HTML, I would probably duplicate it using some javacript.
If you don't want the duplication and really don't want javascript, you can use the :before and :after pseudo-elements instead, and put the link text in a HTML5 data attribute. Not sure how good the browser support for this one is though.
HTML:
<ul>
<li>
<li>
<li>
</ul>
CSS:
ul, li {margin: 0; padding: 0;}
li { list-style-type: none; display: inline-block; line-height: 1.5em; }
li { border: 1px dotted red; position: relative; }
li a:after { content: attr(data-text); padding: 0 30px; }
li:hover a:after { visibility: hidden; }
li:hover a:before { content: attr(data-text); position: absolute; width: 100%; font-size: 130%; line-height: 1.15385em; text-align: center; }
http://jsfiddle.net/kyad4tfh/
Also, note that requirements A and C may conflict with each other. The margin between elements needs to be big enough to accomodate for the increased width of the text.
Following simple list, where in every h4, there is a span at the end.
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus <span class="goto">o</span>
</h4>
</li>
<li>
<h4>Digital Signage <span class="goto">o</span></h4>
…
</ul>
Screenshot of the page's source:
The CSS for the span looks like this …
.items .goto {
font-family: 'QuaySans-Icons';
font-size: 1.6em;
position: relative;
float: right;
}
The final thing looks like this:
The problem I have with this is that when decreasing the width of the browser window (I'm working on a responsive webdesign) the span-icon is breaking into the next line.
Do you have any creative solution or idea on how to prevent this from happening?
Kind regards and thank you in advance,
Matt
If you want the icon to keep inline with the last word in your text line, you can simply do:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and the CSS might be:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your work and the span, the motif will simply follow the word if the li element is forced to flow into a second line.
You can use margin-left to create visual spacing or insert a   entity before the span, quite a few ways to do. The details depend a bit on what effect you want.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (two examples of how to do it)
Keeping Icon Right Justified
Here is one approach to pinning the icon to the right of the h4 element:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Use absolute positioning of the span to keep it to the right and bottom of h4. If h4 forms to line, the icon will follow the second line. You may need to adjust the positioning depending on the icon size. If you allow the icon to grow in size, you may get other issue in extreme cases. I might fix the icon to a px height or width (or a max value). Finally, set some padding-right in h4 to prevent the icon from overlapping the text as the window gets smaller.
Note I explicitly specified line-height values to accentuate the issue around not knowing the height of the icon. You may need to adjust these to vertically position the icon.
Decrease your font-size when you have less space. I guess you have the problem in media with max-width:480px. I found decreasing the font-size a good alternative to keep the design consistent in responsive sites
I've mocked it up on the demo, however it is a bit raw.
.items {
padding:0;
margin:0;
/*width:180px;*/
}
.items li {
border: 1px solid red;
list-style-type: none;
position: relative;
}
.items h4 {
margin:0; padding:0; font-size:16px; padding-right:10px;
}
.items .goto {
margin-top: -10px;
position: absolute;
right: 0;
top: 50%;
}
DEMO
Check the following link and decrease the width of browser.
RESULT
Problem
I am working on a project to theme a website, but I am not allowed to change the HTML or JavaScript. I can only update the CSS stylesheet and add/update images.
Requrements
I need to style a h3 tag to have an
underline/border after the content.
This h3 will be used multiple times
on the page, so the conent length can
vary
The solution needs to be
cross-browser (IE 6/7/8, FF 3, &
Safari)
Sample Code
<div class="a">
<div class="b"><!-- etc --></div>
<div class="c">
<h3>Sample Text To Have Line Afterwards</h3>
<ul><!-- etc --></ul>
<p class="d"><!-- etc --></p>
</div>
</div>
Sample Output
Sample Text to Have Line Afterwards ______________________________________
Another Example __________________________________________________________
And Yet Another Example __________________________________________________
Notes
I think #sample:after { content: "__________"; } option wouldn't work since that would only be the correct length for one of the tags
I tried a background-image, but if it gave me problems if I gave it one with a large width
Using text-indent didn't see to give me the effect I was looking for
I tried a combination of border-bottom and text-decoration: none, but that didn't seem to work either
Any ideas would be much appreciated!
This will work if class 'c' is always the parent of the h3...
.c {
position: relative;
margin-top: 25px;
border-top: 1px solid #000;
padding: 0px;
}
h3 {
font-size:20px;
margin-top: 0px;
position: absolute;
top: -18px;
background: #fff;
}
It lets the container have the border, then uses absolute positioning to move the h3 over it, and the background color lets it blot out the portion of c's border that it's covering.
try attaching a background image to class c of a repeating underline, then add a background color to the h3 to match the background of the container. I believe that you would have to float the h3 left in order to get the width to collapse. does that make sense?
.c {
background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
margin: 0;
padding: 0 0 2px 0;
float: left;
font-size: 20px;
background: #ffffff;
}
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
http://besh.dwich.cz/tmp/h3.html
H3 {
border: 1px solid red;
border-width: 0 0 1px 0;
text-indent: -60px;
}
You need to know the width of the text, but works pretty well.
The only solution I've imagined so far is to make a PNG or GIF image, with 1px height and a very large width (depends on your project, could be like 1x2000px), and do something like this:
h3#main-title { background: url(line.png) no-repeat bottom XYZem; }
where the XYZ you'd set manually, for each title, in 'em' units. But I can't figure out a 100% dynamic solution for this one, without using JS or adding extra markup.
this worked for me
div.c
{
background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
}
div.c h3
{
height:20px;background-color:white;display:inline;
}
you make the div the width of your content
then you set the background of the h3 to the background of your page. this will then overlap the background imageof the full div. You might want to play with background positioning depending on your image
Can you pad content in the UL tags? If so, this might work:
h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }
check source code of: http://nonlinear.cc/lab/friends/elijahmanor.html
then again i have NO IDEA how to control the end of the line.
Assuming that you're working with dynamic content, the best I could suggest is to accept graceful degradation and use a mix of great_llama and Bohdan Ganicky
Imagine:
A long title that will wrap to two lines___________________
and leave you like this in great_llama's solution
and nothing appearing at all with Bohdan Ganicky's solution if ul isn't immediate preceded by ul.
Solution:
.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }
We care about IE6, but accept that this is an aesthetic touch and IE6 users will not suffer. If you can't get the designer to accept this AND you can't alter the HTML, then do something else (before you find another job ;))
Here's a better answer:
.c {
background: url('line.png') repeat-x 0 20px;
}
H3 {
background-color: white;
display: inline;
position: relative;
top: 1px;
}
Use a small, 1px height, couple px wide image as your underline and occlude it with a background color on your H3.
h3:after {
content: '___________';
}