В CSS используйте display: none на элементе, но сохраните его: after

Ответ 1

Нет, это невозможно.

Псевдоэлементы отображаются как дети:

<span id="myspan">whatever<after></span>

И display:none скрывает элемент, содержащий все дочерние элементы.

EDIT 1

JavaScript - ваш лучший вариант, на мой взгляд. Даже без изменения jQuery текст не сложно:

document.getElementById("myspan").innerHTML = "*";​

Демо

EDIT 2

Однако, если вы действительно хотите сделать это с помощью CSS, вы можете использовать отрицательный text-indent, чтобы скрыть текст и позиционирование relative, чтобы показать звездочку:

#myspan {    
    text-indent: -9999px;
    display: block;
}

#myspan:before {
    content: '*';
    position: absolute;
    top: 0;
    left: 9999px;
}

Демо-версия

Ответ 2

#myspan       {font-size:0}
#myspan:after {font-size:16px; content:"*"}

Если у вас установлен минимальный размер шрифта, он не будет работать (настройка браузера). Я бы использовал этот метод только для таких вещей, как предыдущие и следующие кнопки, чтобы считыватели экрана читали "Предыдущий", но вы хотите заменить его на \276e. Итак, планируйте, как это будет выглядеть. С появлением текста.

Ответ 3

Это определенно возможно. Используйте font-size: 0px вместо отображения: none

#myspan {
/*display:none;*/
font-size:0px;
}
#myspan:after {
/*display:inline;*/
font-size:16px;
content:"*"
}

демо здесь

В этом случае вы можете использовать только px/pt для единиц шрифта на экране.

Ответ 4

Я думаю, что очень простой подход к этому - использовать свойство видимости. Но обратите внимание, что "скрытый" элемент по-прежнему занимает пространство. Но если вы в порядке с этим, просто сделайте make-родительский элемент "скрытым" и псевдо-элементом "видимым"

#myspan       {visibility:hidden}
#myspan:after {visibility:visible}

После того, как у вас есть видимость, позаботьтесь, не стесняйтесь играть с позицией, чтобы избежать лишнего пространства.

Что-то вроде,

myspan {
      visibility:hidden;
      position:relative;
    }

myspan:after {
      visibility:hidden;
      position:absolute;
      left:10px;
    }

Ответ 5

Как объясняется @bookcasey, установка display: none на элементе неизбежно скрывает псевдоэлемент :after или :before тоже (потому что они на самом деле ничего не отображаются после или перед элементом, кроме содержимого, добавленного внутри элемента, после или до его реального содержания).

Но цель замены реального содержимого элементов сгенерированным контентом в принципе возможна, согласно старому (2003) CSS3 Сгенерированный и замененный контент-модуль, просто установив content на элемент, например

#myspan { content: "*"; }

До сих пор поддерживается только Opera. Но особый случай, когда замена содержимого - это изображение, поддерживается также браузерами WebKit:

#myspan { content: url(asterisk.png); }

Ответ 6

это возможно, но вам нужно использовать видимость: скрытый вместо отображения: none более подробно см. ответы в следующем вопросе: Как заменить текст на CSS?

Ответ 7

Вам нужно разбить их на несколько блоков DIV контента, потому что стиль наследуется дочерними элементами. Поэтому это невозможно после определения родительского стиля отображения.