Log in / Register

Forum › How do I...?

Table of contents styling

abaker87
I have a working table of contents (table of authorities really), but im having some trouble styling each element to make the whole thing a lot cleaner.

The code i have attached is simplified, in the code im working with the TOA elements get a data-page attribute dynamically. But this has nothing to do with

Basically I want to do 2 things:

1) add a margin-right to every line except the last in the TOA element

2) Add a margin-left to every line except the first in every TOA element

I want to turn this:

This is my first very super long toa element that
spans two lines and is kinda tight......................9

into this:

This is my first very super long toa element
that spans two lines and is kinda tight..........9

Been trying to use multiple combinations of different css pseudo classes and html elements with no luck.

Hopefully somebody has solved this problem before.

<html>
<head>
<style type="text/css">
.toa-title:after{
	content: leader(".") attr(data-page);
}
</style>
</head>
<body>
<div class="brief-content">
	<div class="default-brief">
		<div id="table-of-authorities" class="table-of-authorities">
			<h1 id="toc_authorities">Table of Authorities</h1>
			<div class="toa-citation">
				<span class="toa-title" data-page="1" ><span class="first-line"><span class="case-name">Brown v. Board of Education of Topeka</span>,</span><span>347 U.S. 483 (1954) this is just text to make the element long</span></span>
			</div>
			<div class="toa-citation">
				<span class="toa-title" data-page="2" ><span class="first-line"><span class="case-name">Young v. Baker</span>,</span><span>201 P. 572 (Idaho 1907)</span></span>
			</div>
			<div class="toa-citation" >
				<span class="toa-title" data-page="3" ><span class="first-line">Ala. Const. art. 3</span></span>
			</div>
			<div class="toa-citation" >
				<span class="toa-title" data-page="4"><span class="first-line">U.S. Const. art. I</span></span>
			</div>
		</div>
		
	</div>
</div>
</body>
</html>


Thanks!


mikeday
You can add a left indent to every line but the first using hanging indent:
.toa-citation { text-indent: 2cm hanging }

Adding a right margin to every line but the last is tricky, though. Perhaps add negative margin-right to the ::after pseudo-element?
abaker87
Thanks, Mike! That did it!
StoneCypher
even later, but the thing i've been doing the whole time is to just manually place a space on either side of the leader. it works so well

.toa-title:after{
	content: " " leader(".") " " attr(data-page);
}


i also actually usually use 
" ."
as my leader

John Haugeland is http://fullof.bs/