Databases
StackOverflow2013
Postsdbo
POAlign line breaks with :before selector
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAlign line breaks with :before selector
    primarykey
    data
    text
    <p>I've got five items that all have different content in their respective :before selectors. My goals is to have the line breaks align with the first character of the item, not the before selector.</p> <p>Here's a working fiddle of what I have: <a href="http://jsfiddle.net/64hEn/" rel="nofollow noreferrer">http://jsfiddle.net/64hEn/</a></p> <p>...and the code:</p> <pre><code>&lt;div&gt; &lt;ul&gt; &lt;li class="first"&gt;This is something in a list&lt;/li&gt; &lt;li class="second"&gt;This is something in a list longer here that is long&lt;/li&gt; &lt;li class="third"&gt;This is something in a list this is another thing&lt;/li&gt; &lt;li class="fourth"&gt;This is something in a list something&lt;/li&gt; &lt;li class="fifth"&gt;This is something in a list this one is really really long and it could go on forever&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; div{ width: 200px; } ul{ list-style: none; } .first:before{ content: "First"; font-weight: bold; color: #999; padding: 0px 10px 0px 0px; margin: 0px 10px 0px 0px; border-right: 1px solid #ccc; } .second:before{ content: "Second"; font-weight: bold; color: #777; padding: 0px 10px 0px 0px; margin: 0px 10px 0px 0px; border-right: 1px solid #ccc; } .third:before{ content: "Third"; font-weight: bold; color: #555; padding: 0px 10px 0px 0px; margin: 0px 10px 0px 0px; border-right: 1px solid #ccc; } .fourth:before{ content: "Fourth"; font-weight: bold; color: #333; padding: 0px 10px 0px 0px; margin: 0px 10px 0px 0px; border-right: 1px solid #ccc; } .fifth:before{ content: "Fifth"; font-weight: bold; color: #000; padding: 0px 10px 0px 0px; margin: 0px 10px 0px 0px; border-right: 1px solid #ccc; } </code></pre> <p>Here's a quick mockup of what I want: <img src="https://i.stack.imgur.com/ciufM.png" alt="enter image description here"></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USryanSrich
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou really should not be putting what is essentially "Content" in pseudo elements. They are for styling.
      singulars
      1. POAlign line breaks with :before selector
      1. USPaulie_D
    2. CO@Paulie_D: I don't see a problem. This is hardly different from `list-style-type: decimal`, it's just a customized list counter.
      singulars
      1. POAlign line breaks with :before selector
      1. USBoltClock
    3. COIf you are actually typing text into a `content` property...why not just type it into the `li` itself? However, each to their own
      singulars
      1. POAlign line breaks with :before selector
      1. USPaulie_D
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload