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

Question

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:
Foo Items
List One
aaaa
bbbbb
cccc
List Two
defdefdef
ghighighi
Bar Items
List One
xxx
yyy
List Two
zzzzzzz
aaaabbbbccc
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.
Thanks in advance.

Answer 1

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>

Answer 2

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 maybe tweak it to work for long titles as well.
JSFiddle

Answer 3

I think you are looking for :empty and :not css selectors.
You can do something like this:
div > .exam:not(:empty):before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
JSFIDDLE
If you are trying to change styles of previous sibling, then it is not possible using css. You better add another attribute as you did by adding alt attribute. And also it is best practice to add our custom attributes with a prefix as data-.