css - parent :before pseudoelement with child alt attribute as content

A series of ul elements contained within separate div elements need to not only have the correct content in their :before pseudo element, but also keep the bold tag titles adjacent to the lists.

Additionally, when there are no lists present within the div in question, nothing should appear whatsoever. This is why I'm looking for CSS as a solution, because if I hard-code the titles within the div it will appear if there are no lists present.

I cannot predict which instances of this unique div will have a ul within ahead of time - our application generates content based on user input from drop-down menus, and so if a menu is never used, a ul is not created.

I am unable to use JavaScript of any sort for this labeling process.

This is what I would like to see:

<i>Foo Items</i>
<div style="margin-left:2em"><b>List One</b>
    <ul>
        <li>aaaa</li>
        <li>bbbbb</li>
        <li>cccc</li>
    </ul>
    <b>List Two</b>
    <ul>
        <li>defdefdef</li>
        <li>ghighighi</li>
    </ul>
</div>
<i>Bar Items</i>
<div style="margin-left:2em"><b>List One</b>
    <ul>
        <li>xxx</li>
        <li>yyy</li>
    </ul>
    <b>List Two</b>
    <ul>
        <li>zzzzzzz</li>
        <li>aaaabbbbccc</li>
    </ul>
</div>

At present I am trying to use the alt attribute of the ul to populate the div:before area. This is with the hope that there is a way to define CSS which says "for each div that contains an .exam class element, place the ul's attr(alt) in the div:before element".

This is what I've 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>

And the CSS to go with it:

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

Please see the jsfiddle link here - https://jsfiddle.net/f6gwyvuu/

I realize it's all a bit convoluted but unfortunately this is the result of working around the way in which the application generates its content. I don't really have control over that, I can only stylized the elements it creates.

Solution

First, ul elements can't have an alt attribute. You can use custom data-* attributes instead.

And it doesn't make much sense to repeat the same data in each ul. Instead, add it only to the div.

Then, you can use

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>