Как я могу заменить текст с CSS?

Question

Как я могу заменить текст на css, используя такой метод:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

Вместо (img[src*="IKON.img"]) мне нужно использовать что-то, что может заменить текст.

Я должен использовать [ ], чтобы заставить его работать.

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

Мне нужно заменить «Факты».

Answer 1

Или, может быть, вы можете обернуть 'Факты' вокруг <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';
}

Answer 2

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

Вы можете заменить текст через CSS. Давайте заменим зеленую кнопку на «привет» красной кнопкой, которая говорит «до свидания» , используя 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;
}

Примечание:

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

Answer 3

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

.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

Answer 4

Исходя из ответа mikemaccana , это сработало для меня

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Абсолютное позиционирование

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

Answer 5

Простой, Короткий, Эффективный.Никаких дополнительных 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;
}

Answer 6

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

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

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

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

Answer 7

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

В этом примере текст кнопки настраивается в соответствии с размером ширины экрана.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Текст кнопки:

1) с: до

большой экранxxx

большой экран

2) с: после

xxxbig экран

большой экран

Answer 8

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

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

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

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

Answer 9

Это работало для меня со встроенным текстом.Протестировано в 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; 
}

Answer 10

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

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