Как заменить текст на css с помощью метода, подобного этому:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
Вместо (img[src*="IKON.img"]) мне нужно использовать что-то, что вместо этого может заменить текст.
Мне нужно использовать [ ], чтобы заставить его работать.
<div class="pvw-title">Facts</div>
Мне нужно заменить "Факты".
Или, может быть, вы можете обернуть "Факты" вокруг a <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. Давайте заменим зеленую кнопку "привет" на красную кнопку "до свидания", используя 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;
}
Замечания:
visibility. Примечание display: none из оригинальных элементов не работает.Если вы хотите использовать псевдоэлементы и позволить им вставлять содержимое, вы можете сделать следующее. Он не предполагает знания исходного элемента и не требует дополнительной разметки.
.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 */
}
Основано на ответ mikemaccanas, это сработало для меня
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}
& sect; Абсолютное позиционирование
элемент, который позиционируется абсолютно, вынимается из потока и, следовательно, не занимает места при размещении других элементов.
Простой, короткий, эффективный. Не требуется дополнительного 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;
}
Вы не можете, ну, можете.
.pvw-title:after {
content: "Test";
}
Это будет вставлять содержимое после текущего содержимого элемента. Он фактически не заменяет его, но вы можете выбрать для пустого div и использовать CSS для добавления всего содержимого.
Но пока вы более или менее можете, вы не должны. Фактический контент должен быть помещен в документ. Свойство содержимого в основном предназначено для небольшой разметки, например, кавычки вокруг текста, которые должны отображаться в кавычках.
Попробуйте использовать: до и: после. Один вставляет текст после рендеринга 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) с: после
хххбиг экран
большой экран
Он может не совсем ответить на вопрос, но он удовлетворил мои потребности, а может быть и другие.
Итак, если вы просто хотите показать разные тексты или изображения, сохранить тег пустым и написать свой контент в нескольких атрибутах данных, как это, <span data-text1="Hello" data-text2="Bye"></span>.
Отобразите их с одним из псевдоклассов :before {content: attr(data-text1)}
Теперь у вас есть множество способов переключения между ними. Я использовал их в сочетании со мультимедийными запросами для гибкого подхода к дизайну, чтобы изменить имена моей навигации на значки.
Это работало для меня со встроенным текстом. Протестировано в 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!';
}
Мне повезло установить font-size: 0 внешнего элемента, а font-size селектора :after - все, что мне нужно.
Замена текста псевдоэлементами и видимость 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.";
}
Используя псевдоэлемент, этот метод не требует знания исходного элемента и не требует дополнительной разметки.
#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;
}
Этот флажок установлен как кнопка, которая показывает либо "Да", либо "Нет" в зависимости от состояния "проверено". Таким образом, он демонстрирует один способ замены текста с помощью 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, поэтому он должен работать в другом месте.
У меня возникла проблема, когда мне пришлось заменить текст ссылки, но не мог использовать 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 необходимо будет изменить исходя из ваших требований, но это общий способ делать то, что вы просите.
Изменить: может ли кто-нибудь сказать мне, почему это было приостановлено? Мое решение работает...
В отличие от того, что я вижу в каждом другом ответе, вам не нужно использовать псевдоэлементы, чтобы заменить содержимое наложения на изображение изображением
фактыdiv.pvw-title { /* no :after or :before required*/
content: url("your url here");
}
Это невозможно сделать без трюков. Вот как это работает, заменив текст изображением текста.
.pvw-title{
text-indent:-9999px;
background-image:url(text_image.png)
}
Этот тип вещей обычно выполняется с помощью Javascript. Вот как это можно сделать с помощью jQuery:
$('.pvw-title').text('new text');
способ сделать эту работу - добавить высоту строки к CSS. это сделает блок видимым над скрытым, таким образом, это не будет скрывать измененный текст.
пример с использованием до:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'whatever it is you want to add';
line-height: 1.5em
}