Можно ли использовать `display: none` и` display: inline` для отображения скрытого скрытого элемента?

Question

я могу привнести CSS в следующий код, чтобы повлиять на классы:

<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> 

Я хотел бы использовать :before, чтобы заменить текст Thycotic Secret Server, и я хотел бы заменить Express Edition.

Возможно ли использовать display:none против .productText li{} при сохранении видимости .EditionLabel span{} или .EditionName :before?

Такие, как:

.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; 
    } 

... который явно не работает, так как все вложенные элементы .productText типа li скрыты.

Является ли то, что я пытаюсь сделать возможным, учитывая код, который нужно изменить?

[раствор]

Поскольку весь текст «внутри» всех li элементов имеет свою font-size значение 0, я использовал более конкретные элементы для управления свойствами.

.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" 
    } 

В этом конкретном примере, я расположена font-size для EditionName в оригинальной CSS и перенес его в этот набор, чтобы сохранить тот же внешний вид.

Answer 1

Вы можете играть с font-size, например.

li { font-size: 0; } 
li span { font-size: 1rem; } 
li span:before { content:"to replace Thycotic Secret Server "; } 

Пример: http://codepen.io/anon/pen/zxarjd