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

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

Факты

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

Answer 7

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

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

.pvw-title span {
  display: none;
}

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

Answer 8

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

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

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

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