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

321

Как я могу заменить текст CSS с помощью метода, подобного этому:

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

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

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

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

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

MokiTa
источник
Если честно, для этого лучше всего использовать javascript.
Сэр
Использование Javascript требует загрузки DOM, поэтому есть FOUC. Я хочу сделать это, чтобы заменить текст содержимым, извлеченным из строки запроса, избегая при этом FOUC без необходимости генерировать серверную часть HTML (что позволяет агрессивно кэшировать HTML и обслуживать его из CDN).
nemequ
32
Вопрос в том, как это сделать с помощью CSS. Я имею в использовании CMS , который только позволяет мне изменить CSS, поэтому я приехал на этой странице , а прибегая к помощи для ответа, а не другой. Вот почему мы отвечаем на вопрос, который был задан, вместо того, чтобы спросить, почему ситуация спрашивающего не отличается.
felwithe

Ответы:

291

Или, может быть, вы могли бы обернуть «Факты» <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';
}
Мэтью Кашиа
источник
52
Хорошо, но это изменение HTML, а не только CSS.
mikemaccana
22
Иногда ваш единственный вариант
locrizak
4
span {display: none; } также должен скрывать псевдоэлемент. Вы должны использовать видимость: скрытый вместо
xryl669
2
дисплей: нет; и видимость: скрытая; оба скрывают псевдоэлемент
Факундо Коломбье
10
@Mathew скрывает диапазон, но добавляет псевдоэлемент в div, поэтому
псевдоэлемент
249

Обязательно : это хак: 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к оригинальному элементу не работает.
mikemaccana
источник
2
Это не работает, например, в 10, есть идеи, как изменить это, чтобы сделать это?
Solmead
49
display: none;не работает, потому что на ::afterсамом деле означает «внутри этого элемента, но в конце», на случай, если кому-то будет интересно.
Ry-
4
К сожалению, «измененная» кнопка больше не работает как кнопка. Это хороший пример, просто он не относится к кнопке.
xryl669
1
дисплей: нет; и видимость: скрытая; оба скрывают псевдоэлемент
Факундо Коломбье
Почему, когда я делаю это, он заменяет элемент, но текст содержит заглавные буквы и не может быть изменен на строчные?
Jpaji Rajnish
159

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

.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

Джеймс ван Дайк
источник
1
Этот ответ работает там, где ряд других ответов не такие, как текстовые узлы внутри <th>элемента.
Крис Керекс,
5
Это хорошо работает. В моем случае line-height: 0и color: transparentна главном элементе и сбросе этих значений на псевдо сделайте свою работу (без возни с text-indent)
dontGoPlastic
1
Разве это не должно быть line-height: normalвместо initial?
Бенджамин
1
причина использования text-indent заключается в том, что если исходный текст длиннее, элемент остается размером со старым текстом, не уменьшаясь до размера нового текста (при условии, что это именно то, что вам нужно)
Крис Янссен,
Текст-отступ: -9999px; работает на IE. Принимая во внимание, что видимость: скрытая; метод не работает в IE.
Том Стермиц
57

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

button {
  position: absolute;
  visibility: hidden;
}

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

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

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

Стивен Пенни
источник
2
Для меня этот ответ был лучше других, потому что он работает с заменой текста в той же строке, то есть он не вызывает разрыв строки в тексте (для моей конкретной комбинации HTML и CSS).
РРР
30

Это просто, коротко и эффективно. Никакого дополнительного 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;
}
hawkeye126
источник
22

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

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

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

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

GolezTrol
источник
Я очень уверен в том, что я использовал код для замены текста на вид этого метода .. '<div class = "pvw-title"> Facts </ div> <div class = "pvw-title"> Facts </ div> 'Я не могу использовать: после, потому что у меня есть более одного класса div с тем же именем :(
MokiTa
Насколько широко это совместимо с браузерами? И я подозреваю, что javascript будет лучшим выбором в долгосрочной перспективе для такого рода гибкости.
Сэр
Современные браузеры поддерживают это. Я не уверен в старых версиях IE, но думаю, что это можно посмотреть на quirksmode.com. -edit- Может: quirksmode.org/css/user-interface/content.html
GolezTrol
15

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

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

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

  2. С участием :after

    хххбиг экран

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

живи любя
источник
11

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

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

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

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

Robbendebiene
источник
10

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

Джером
источник
1
Это хорошо работает. Вот демо .
Артур
9

Это работало для меня со встроенным текстом. Он был протестирован в Firefox, 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;
}
Ноэль Уильямс
источник
2
Не работает для меня, по крайней мере, в IE 9–11, потому что он игнорирует «visibility: visible» для элемента: after: stackoverflow.com/questions/17530947/…
thenickdude
8

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

.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!';
}
Пит хорошо
источник
3
Это проблематично для пользователей с программами чтения с экрана. Если вы не измените disaply / видимость элемента и не предоставите никаких подсказок арии, ваш «невидимый» текст все равно может быть прочитан программой чтения с экрана.
Заметный Компилятор
8

Замена текста псевдоэлементами и видимость 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.";
}
Ахсан Афтаб
источник
3

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

#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;
}
Vin
источник
2

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

Стив Дуглас
источник
2

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

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

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }
Estecka
источник
2
Начиная с CSS2, contentприменяется только к :beforeи :after. CSS3 распространяет его на все, но модуль «Генерируемый контент» все еще находится в черновом состоянии, поэтому любое использование с большой вероятностью будет зависеть от браузера.
mrec
1
Что такое «балис» ? Не « 1. (Европейская система управления поездом) Электронный маяк или транспондер, размещенный между рельсами железной дороги » , я полагаю. (Пожалуйста, ответьте, отредактировав свой вопрос , а не здесь, в комментариях).)
Питер Мортенсен
1

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

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

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

$('.pvw-title').text('new text');
Натан Манусос
источник
3
Я также не могу использовать Javascript: /
MokiTa
1
Это единственный способ, который, я думаю, мог бы работать: .pvw-title span [style * = "color: # 000, font-size: 14px;"] {visibility: hidden; } .pvw-title span [style * = "color: # 000; font-size: 14px;"]: after {visibility: visible; цвет: # 000; Размер шрифта: 14px; содержание: «Тест»; } но, поскольку они оба используют один и тот же стиль, я не могу это сделать ..: /
MokiTa
почему вы выбираете его в зависимости от цвета / шрифта?
Натан Манусос
Я бы выбрал его на основе всего стиля, чтобы я мог редактировать этот конкретный заголовок, а не оба, так как оба имеют одно и то же имя "div".
MokiTa
1

У меня была проблема, когда мне пришлось заменить текст ссылки, но я не мог использовать 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 нужно будет изменить в зависимости от ваших требований, но это общий способ сделать то, что вы просите.

AlmightyWhy
источник
1
@AlmightПочему я подозреваю, что это было отклонено, потому что это решение требует изменения разметки, и я подозреваю, что если ОП может изменить разметку, он или она просто изменит текст напрямую. Другими словами, для ОП требовалось решение только для CSS
dannie.f,
1

Я нашел решение, подобное этому, где слово «Темный» будет сокращено до «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>

StefanBob
источник
1

Через восемь лет я столкнулся с той же проблемой, пытаясь использовать расширение для браузера 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-редактор, и поэтому я хотел выбрать его в зависимости от стиля.

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

MokiTa
источник
0

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

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

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}
Тал Талмон
источник
0

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

Взломать, как заменить текст HTML с помощью CSS

Даниил Даниелецкий
источник