Измените текст метки, используя только CSS [duplicate]

Вы не можете, ну, можете.

.pvw-title:after {
  content: "Test";
}

Это вставляет содержимое после текущего содержимого элемента. Это фактически не заменяет его, но вы можете выбрать пустой div и использовать CSS для добавления всего содержимого.

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

Простой, короткий, эффективный. Никакого дополнительного html не нужно.

.pvw-title { color: transparent; }

.pvw-title:after { 
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

Мне пришлось сделать это для замены текста ссылки, кроме дома, для палочек woocommerce

SASS / LESS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after { 
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after { 
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

Если вы хотите использовать псевдоэлементы и позволить им вставлять содержимое, вы можете сделать следующее. Он не предполагает знания исходного элемента и не требует дополнительной разметки.

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

Пример JSFiddle

Мне посчастливилось установить font-size: 0 внешнего элемента, а font-size селектора :after - все, что мне нужно.

Или, может быть, вы можете обернуть «Факты» вокруг <span> следующим образом:

<div class="pvw-title"><span>Facts</span></div>

Затем используйте:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

Обязательно: это взломать: CSS не подходит для этого, но в некоторых ситуациях - например, у вас есть сторонняя библиотека в iframe, которую можно настроить только с помощью CSS - такой взлом единственный вариант.

Вы можете заменить текст через CSS. Давайте заменим зеленую кнопку «hello» красной кнопкой, которая говорит «до свидания», используя CSS. Смотрите http://jsfiddle.net/ZBj2m/274/ для живой демонстрации:

Вот наша зеленая кнопка:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Теперь давайте спрячемся исходный элемент, но потом добавьте еще один элемент блока:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Примечание:

• Мы явно должны отметить это как элемент блока, после того, как элементы «span» по умолчанию
• Нам нужно компенсировать исходный элемент, отрегулировав положение псевдоэлемента.
• Мы должны скрыть исходный элемент и отобразить псевдоэлемент с помощью visibility. Примечание display: none на исходном элементе не работает.

Это невозможно сделать без трюков. Вот как это работает, заменив текст изображением текста.

.pvw-title{
    text-indent:-9999px;
    background-image:url(text_image.png)
}

Этот тип вещей обычно выполняется с помощью Javascript. Вот как это можно сделать с помощью jQuery:

$('.pvw-title').text('new text');

Это работало для меня со встроенным текстом. Протестировано в FF, Safari, Chrome и Opera

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>


span {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px; 
}

span:after {
content: "goodbye";
visibility: visible;
word-spacing:normal;
letter-spacing:normal; 
}

Я использую этот трюк:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Я даже использовал это для обработки интернационализации страниц, просто изменив базовый класс ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Это может не совсем ответить на вопрос, но он удовлетворил мои потребности и, возможно, и другие.

Итак, если вы просто хотите показать разные тексты или изображения, сохраните тег пустым и напишите свой контент в нескольких атрибутах данных, таких как <span data-text1="Hello" data-text2="Bye"></span>. Отобразите их с одним из псевдо классов :before {content: attr(data-text1)}

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

демонстрация jsfiddle и примеры

Замена текста с помощью псевдоэлементов & amp; CSS Visibility

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

Этот флажок установлен как кнопка, которая показывает либо «Да», либо «Нет» в зависимости от состояния «проверено». Таким образом, он демонстрирует один способ замены текста с помощью CSS без необходимости писать какой-либо код.

Он по-прежнему будет вести себя как флажок, возвращающий (или не возвращающий) значение POST, но из точки отображения

Цвета могут быть не по своему вкусу, они только там, чтобы проиллюстрировать точку.

HTML:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... и CSS:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

Я только пробовал это в Firefox, но это стандартный CSS, поэтому он должен работать в другом месте.

Используя псевдоэлемент, этот метод не требует знания исходного элемента и не требует дополнительной разметки.

#someElement{
    color: transparent; /*you may need to change this color*/
    position: relative;
}
#someElement:after { /*or use :before if that tickles your fancy*/
    content:"New text";
    color:initial;
    position:absolute;
    top:0;
    left:0;
}