Thread: Line over text
View Single Post
Old 06-09-2013, 06:34 PM   #8
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,801
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Steadyhands View Post
What about if you want the line beside the heading like this?

I'd like a better way to do this as it doesn't allow for changes in the size of the chapter heading text, and I'd like it to start on the right then finish at the header.
Hmmm, I don't know if this will work for you, but you can do a try. In your css stylesheet write:

Code:
h2 {
   font-size: 1.4em;
   text-align: left;
   margin: 1em 0;
   white-space: nowrap;
}

h2:after {
   display: inline;
   font-size: 1.2em;
   text-overflow: clip;
   white-space: nowrap;
   word-spacing: -10px;
   content:" ————————————————————————————————————————————————————————————";
}

And in your .html file write:

Code:
<h2>BLA BLA BLA BLA</h2>

<p>.... something ...</p>
I really don't know if your reader can support the pseudo-element :after.

Regards
Rubén
Attached Thumbnails
Click image for larger version

Name:	line-aside.png
Views:	234
Size:	16.0 KB
ID:	106840  

Last edited by RbnJrg; 06-09-2013 at 06:42 PM.
RbnJrg is offline   Reply With Quote