Css - parent: before pseudo-element with child alt attribute as content

Question

A series of elements ulcontained in individual elements divshould not only contain the correct content in its pseudo-element :before, but also preserve bold tag names adjacent to lists.

In addition, if there are divno lists in the list in question , nothing should appear. That's why I'm looking for CSS as a solution, because if I hardcode the headers in div, it will appear if there are no lists available.

I can’t predict what instances of this unique divwill have in uladvance - our application generates content based on user input from the drop-down menus, so if the menu is never used, ulit is not created.

I cannot use any JavaScript for this marking process.

Here is what I would like to see:

Foo Elements

List 1  

•       
• aaaa      
• BBBBB      
• ssss  

   List two  

•       
• defdefdef      
• ghighighi  

Panel Elements

List 1  

•       
• xxx      
• yyy  

   List two  

•       
• ZZZZZZZ      
• aaaabbbbccc  

I'm currently trying to use an attribute alt ulto populate an area div:before. This is because there is a way to define CSS that says "for each divthat contains an element of the class .exam, put ul attr(alt)in the element div:before."

Here is what I tried:

<div>
    <b>Far</b>
    <ul class="exam" alt="Foo Items">
        <li>Stuff</li>
        <li>Things</li>
    </ul>
    <b>Near</b>
    <ul class="exam" alt="Foo Items">
        <li>dunno</li>
    </ul>
</div>
<div>
    <b>Far</b>
    <ul class="exam" alt="Bar Items">
        <li>Foo</li>
    </ul>
    <b>Near</b>
    <ul>
        <li>bar</li>
        <li>eggs</li>
    </ul>
</div>

CSS, :

div > .exam:first-of-type:before {
    content:attr(alt);
    font-style:italic;
}
ul {
    margin:0 0 1em 1em;
    padding:0;
}
li {
    margin-left:2em;
}

. jsfiddle - https://jsfiddle.net/f6gwyvuu/

, , , , , . , , .

.

Answer 1

-, ul alt. data-*.

ul. div.

div:not(:empty):before {
  content: attr(data-alt);
  display: block;
}

div:not(:empty):before {
  content: attr(data-alt);
  display: block;
  font-style: italic;
}
ul {
  margin: 0 1em;
  padding: 0;
}
li {
  margin-left: 2em;
}

<div data-alt="Foo Items">
  <b>Far</b>
  <ul class="exam">
    <li>Stuff</li>
    <li>Things</li>
  </ul>
  <b>Near</b>
  <ul class="exam">
    <li>dunno</li>
  </ul>
</div>
<div data-alt="Baz Items"></div>
<div data-alt="Bar Items">
  <b>Far</b>
  <ul class="exam">
    <li>Foo</li>
  </ul>
  <b>Near</b>
  <ul>
    <li>bar</li>
    <li>eggs</li>
  </ul>
</div>

Answer 2

, :empty :not css .

- :

div > .exam:not(:empty):before {
    content:attr(alt);
    font-style:italic;
}
ul {
    margin:0 0 1em 1em;
    padding:0;
}
li {
    margin-left:2em;
}

JSFIDDLE

, css. , , alt. data-.

Answer 3

If you must do this, try

div {position:relative;} /*let this be the absolute container*/
div > .exam {position: static;}
div:not(:empty) {padding-top: 30px;} /*for div with generated content, only works for short titles*/
div > .exam:first-of-type:before {
    content:attr(alt);
    font-style:italic;
    position: absolute;
    top: 0;
    margin-left: -1em; /*compensate your ul margin*/
}
ul {
    margin:0 0 1em 1em;
    padding:0;
}
li {
    margin-left:2em;
}

This works for short titles, but perhaps it can be customized for long names.

Jsfiddle