If I want to change the appearance of certain classes with CSS, I can do so in the following code:
<ul class="productText">
<li>Thycotic Secret Server <span id="headerControl_VersionNumber" class="VersionNumber">8.8</span></li>
<li class="EditionLabel"><span id="headerControl_EditionNameLabel" class="EditionName">Express Edition</span> </li>
</ul>
I would like to use :before to replace the text Thycotic Secret Server, and also replace Express Edition.
Is it possible for me to hide .productText li{} using display:none, while still keeping .EditionLabel span{} or .EditionName :before visible?
For example:
.productText:before {
content:"to replace Thycotic Secret Server" !important;
}
.productText li{
display:none !important;
}
.EditionName li{
display:inline !important;
}
.EditionName:before {
content:"to replace Express Edition" !important;
}
This method does not work as all sub-elements of .productText that are type li are hidden.
Can I achieve what I want with the given code?
[solution]
Since the text within all li elements has its font-size set to 0, I had to use more specific elements to control the properties.
.productText li{
font-size: 0;
}
.productText:before {
font-size: 1rem;
content:"replaced larger text"
font-variant:small-caps;
}
.EditionName:after {
font-size: 0.8rem;
content:"replaced smaller text"
}
In this particular example, I found the font-size for EditionName in the original CSS and incorporated it into this set to maintain the same appearance.