Geek Answers Handbook

How to make a background / border start after content?

I am trying to create a date as the next image, however it is difficult for me to put this dashed line on the same line as the date.

image

The main problem is that I cannot change the markup. I have the following structure:

<li class="activity-date-grouping"> <span>4 Apr 2013</span> </li>

and I can not add another element. I tried with borders and background, but I can not move the line. Here is a jsfiddle with a border. Is it possible to achieve this without an additional element?

+4
source share
7 answers

Since you cannot change the existing structure, you can use a pseudo-element instead:

 .activity-date-grouping { /* ... */ white-space: nowrap; } .activity-date-grouping span:after{ display:inline-block; width: 100%; height: 5px; overflow:hidden; content: "."; border-bottom:1px dashed #911c51; vertical-align: bottom; margin-bottom: 5px; margin-left: 5px; }

http://jsfiddle.net/hTWhG/4/

+5
source

Unlike James Montagne's solution, this allows the element to turn around:

http://cssdeck.com/labs/sukywzdz

 .activity-date-grouping span { overflow: hidden; font-weight: bold; padding: 2px 5px 2px 5px; color: #911c51; font-size: 1.3em; padding-bottom: 5px; display: block; } .activity-date-grouping span:after { content: " "; display: inline-block; border-bottom:1px dashed; width: 100%; margin-right: -50%; /* optional */ position: relative; left: .5em; }

The demo has styles attached to li .

+2
source

I manage to do what you want using the absolute position, but this is not very clean:

 .activity-date-grouping span { position: absolute; top: 5px; left: 0px; }

See update script

+1
source

I updated your fiddle , it seems to display the way you would like. The key is to add CSS to the span element itself. Please note that it should work in older browsers, because I did not use it: after a pseudo class or content property ...

 .activity-date-grouping { display: block; font-weight: bold; padding: 2px 5px 22px 5px; color: #911c51; font-size: 1.3em; margin-left: 70px; border-bottom:1px solid #911c51; } .activity-date-grouping span { position: absolute; margin-left: -110px }
+1
source

Set the following CSS for the range

 span { position:absolute; top:5px; background-color:white; }

Js fiddle

+1
source

You can do this without absolute provisions using appropriate background images:

 li.activity-date-grouping { background-image: url(https://www.google.com/images/srpr/logo4w.png); background-position: 0px 0.8em; background-repeat: repeat-x; background-size: 100px 2px; list-style-type: none; } li.activity-date-grouping span { display: inline; font-size: 1em; padding: 5px; background-color: #ffffff; }

http://jsfiddle.net/4Ezxn/

0
source

Wow, people here are too fast, but I will send my code just for that. Here are two possible solutions: the first is the best (as other posts have shown):

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style media="all"> ul {list-style: none; margin: 0; padding: 0;} .activity-date-grouping span { font-weight: bold; font-size: 1.3em; color: #911c51; position: relative; } .activity-date-grouping span:after { content: ""; position: absolute; left: 105%; bottom: 0.2em; width: 999em; border-bottom:1px dashed #911c51; } </style> </head> <body> <ul> <li class="activity-date-grouping"> <span>4 Apr 2013</span> </li> <ul> </body> </html>

And other:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style media="all"> ul {list-style: none;} .activity-date-grouping { border-bottom:1px dashed #911c51; } .activity-date-grouping span { font-weight: bold; font-size: 1.3em; color: #911c51; display: inline-block; background: white; margin-bottom: -1px; } </style> </head> <body> <ul> <li class="activity-date-grouping"> <span>4 Apr 2013</span> </li> <ul> </body> </html>
0
source

More articles:


All Articles