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

Question

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

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

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

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

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

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

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

477

css text replace

Источник

user1013586 25 окт '11 в 21:58

26 ответов

Другие вопросы по тегам css text replace

user1149950 18 дек '12 в 21:03 2012-12-18 21:03 · Answer 1 · 2012-12-18 21:03

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

416

Источник

user1149950 18 дек '12 в 21:03

user123671 10 янв '13 в 15:55 2013-01-10 15:55 · Answer 2 · 2013-01-10 15:55

Обязательно: это хак: 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 являются span
Нам нужно компенсировать исходный элемент, регулируя положение псевдоэлемента.
Мы должны скрыть оригинальный элемент и отобразить псевдоэлемент, используя visibility, Заметка display: none на оригинальный элемент не работает.

user86244 26 фев '14 в 22:14 2014-02-26 22:14 · Answer 3 · 2014-02-26 22:14

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

.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

user1002260 18 июн '13 в 03:51 2013-06-18 03:51 · Answer 4 · 2013-06-18 03:51

Основываясь на ответе mikemaccana, это сработало для меня

button {
  position: absolute;
  visibility: hidden;
}

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

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

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

user574823 16 апр '15 в 18:16 2015-04-16 18:16 · Answer 5 · 2015-04-16 18:16

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

user1788884 30 июн '21 в 01:42 2021-06-30 01:42 · Answer 6 · 2021-06-30 01:42

Чтобы использовать после и скрыть исходный контент, вы можете использовать этот хак:

Параметр font-sizeзначение 0 заставляет текст исчезать без удаления фактического элемента из области просмотра. Следовательно :after селектор работает и должен отображаться во всех браузерах.

user511529 25 окт '11 в 22:02 2011-10-25 22:02 · Answer 7 · 2011-10-25 22:02

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

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

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

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

user436341 12 сен '16 в 17:14 2016-09-12 17:14 · Answer 8 · 2016-09-12 17:14

Попробуйте использовать: до и: после. Один вставляет текст после рендеринга 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) с: после

хххбиг экран

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

user4876639 26 фев '21 в 22:44 2021-02-26 22:44 · Answer 9 · 2021-02-26 22:44

Самый простой способ, который я нашел, - это сделать элемент font-size: 0px, а затем перезаписать его любым размером шрифта при создании :afterпсевдо. Пример ниже:

      .pvw-title { 
    font-size:0px;
}

.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

13

Источник

user4876639 26 фев '21 в 22:44

user3771196 07 авг '16 в 10:26 2016-08-07 10:26 · Answer 10 · 2016-08-07 10:26

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

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

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

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

user4446607 16 авг '18 в 00:25 2018-08-16 00:25 · Answer 11 · 2018-08-16 00:25

Замена текста псевдоэлементами и видимость CSS

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

12

Источник

user4446607 16 авг '18 в 00:25

user62983 03 мар '17 в 16:34 2017-03-03 16:34 · Answer 12 · 2017-03-03 16:34

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

12

Источник

user62983 03 мар '17 в 16:34

user7658119 31 авг '21 в 04:45 2021-08-31 04:45 · Answer 13 · 2021-08-31 04:45

Попробуйте так:

      IDENTIFIER {
    visibility: hidden;
    position: relative;
}
IDENTIFIER::after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "NEW_CONTENT";
}

11

Источник

user7658119 31 авг '21 в 04:45

user2647512 02 авг '13 в 22:39 2013-08-02 22:39 · Answer 14 · 2013-08-02 22:39

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

10

Источник

user2647512 02 авг '13 в 22:39

user2055189 05 июл '15 в 12:16 2015-07-05 12:16 · Answer 15 · 2015-07-05 12:16

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

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

user4452825 12 ноя '15 в 15:05 2015-11-12 15:05 · Answer 16 · 2015-11-12 15:05

Это реализует флажок в виде кнопки, которая показывает "Да" или "Нет" в зависимости от "проверенного" состояния. Таким образом, он демонстрирует один способ замены текста с использованием 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, поэтому он должен работать в другом месте.

user1982454 16 май '15 в 17:08 2015-05-16 17:08 · Answer 17 · 2015-05-16 17:08

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

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

3

Источник

user1982454 16 май '15 в 17:08

user7308434 21 июл '17 в 23:43 2017-07-21 23:43 · Answer 18 · 2017-07-21 23:43

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

факты

div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}

2

Источник

user7308434 21 июл '17 в 23:43

user3317728 29 дек '19 в 00:11 2019-12-29 00:11 · Answer 19 · 2019-12-29 00:11

Я нашел подобное решение, в котором слово "Темный" можно было бы сократить до "D" на экране меньшей ширины. По сути, вы просто устанавливаете размер шрифта исходного содержимого равным 0, а сокращенную форму получаете как псевдоэлемент.

В этом примере изменение происходит при наведении курсора:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}

<span>Dark</span>

user3511695 13 май '23 в 15:24 2023-05-13 15:24 · Answer 20 · 2023-05-13 15:24

Установка исходного элементаline-heightи чтобы0px(затем установив:afterпсевдоэлементfont-size) — единственное , что сработало для меня, не испортив пространство/форматирование/заполнение контейнера элемента и окружающих элементов.

Построен на основе ответа Стефана Боба .

2

Источник

user3511695 13 май '23 в 15:24

user1013586 02 янв '20 в 14:26 2020-01-02 14:26 · Answer 21 · 2020-01-02 14:26

Спустя восемь лет я столкнулся с той же проблемой, когда пытался использовать расширение браузера Stylish, чтобы что-то изменить на веб-сайте (не на моем). И на этот раз я заставил его работать, просмотрев исходный код с помощью "inspect element" и на его основе создал код CSS.

Вот как это выглядело раньше:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Это тот же фрагмент HTML и CSS, который я использовал для изменения стиля:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Вы можете запустить приведенный выше код, и вы увидите, что он работает (проверено в Chrome).

_{Это просто то, чего я хотел в те дни, когда задавал этот вопрос.}

_{Я использовал что-то похожее на блог сообщества / Myspace, и единственное, что у вас было при стилизации вашего профиля, - это их редактор CSS, и поэтому я хотел выбрать его на основе стиля.}

Я нашел здесь ответ:

user9557874 09 дек '20 в 14:07 2020-12-09 14:07 · Answer 22 · 2020-12-09 14:07

Пример

      <!DOCTYPE html>
<html> 
<head> 
   <title>Devnote</title>
    <style>
        .replacedValue { 
            visibility: hidden; 
            position: relative; 
        } 
        .replacedValue:after { 
            visibility: visible; 
            position: absolute; 
            top: 0; 
            left: 0; 
            content: "Devnote is developer answer solve. devnote.in"; 
        } 
    </style> 
</head>
<body> 
    <p class="replacedValue">Old Text Here</p>
</body> 
</html>

Выход

      Devnote is developer answer solve. devnote.in

user11127383 12 июн '20 в 23:38 2020-06-12 23:38 · Answer 23 · 2020-06-12 23:38

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

Вы не хотите вручную позиционировать этот текст для изменения, поэтому вы хотите воспользоваться flexbox
Вы не хотите использовать padding и / или margin к тексту, явно используя px, который для разных размеров экрана на разных устройствах и в разных браузерах может давать разные результаты

Вот решение, вкратце flexbox гарантирует, что он автоматически позиционируется идеально и rem является более стандартизированной (и автоматизированной) альтернативой для пикселей.

CodeSandbox с приведенным ниже кодом и выводом в виде снимка экрана, прочтите, пожалуйста,note под кодом!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

Примечание: для разных тегов могут потребоваться разные значения rem, этот был оправдан для h1и только на больших экранах. Однако с@media вы можете легко распространить это на мобильные устройства.

user2548452 21 мар '15 в 20:48 2015-03-21 20:48 · Answer 24 · 2015-03-21 20:48

У меня была проблема, когда мне пришлось заменить текст ссылки, но я не мог использовать javascript и не мог напрямую изменить текст гиперссылки, так как он был скомпилирован из XML. Кроме того, я не мог использовать псевдоэлементы, или они не работали, когда я их пробовал.

По сути, я помещал текст, который хотел, в промежуток, помещал тег привязки под ним и оборачивал оба в div. Я в основном переместил тег привязки через css, а затем сделал шрифт прозрачным. Теперь, когда вы наводите курсор на промежуток, он "действует" как ссылка. Действительно хакерский способ сделать это, но это, как вы можете иметь ссылку с другим текстом...

Это скрипка того, как я обошел эту проблему

Мой HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

Мой CSS

 div.field a {
     color:transparent;
     position:absolute;
     top:1%;
 }
 div.field span {
     display:inline-block;
 }

CSS нужно будет изменить в зависимости от ваших требований, но это общий способ сделать то, что вы просите.

Редактировать: Кто-то может сказать мне, почему это было отклонено? Мое решение работает...

user529891 25 окт '11 в 22:06 2011-10-25 22:06 · Answer 25 · 2011-10-25 22:06

Это не реально без трюков. Вот способ, который работает, заменяя текст изображением текста.

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

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

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

1

Источник

user529891 25 окт '11 в 22:06

user6995235 02 янв '19 в 10:25 2019-01-02 10:25 · Answer 26 · 2019-01-02 10:25

Способ сделать эту работу - добавить высоту строки к CSS. это сделает блок видимым над скрытым, таким образом, это не будет скрывать измененный текст.

пример с использованием до:

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'whatever it is you want to add';
  line-height: 1.5em
}

0

Источник

user6995235 02 янв '19 в 10:25