Заменить конкретный символ, используя css

У меня есть неупорядоченный список с div

<div>
 <ul>
 <li>Login to your account</li>
 <li>Visit the Accounts ? Invoices page</li>
 <li>Click the <span>Pay Now</span> button</li>
 </ul>
 </div>

Как я могу заменить "?" во втором li с "- > " с использованием чистого css

5 ответов

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

.myClass ul li:nth-child(2) {
 content: '->';
 position: absolute;
 left: 10.5em;
 background: #fff;
}

Как упоминалось другими, для такой работы CSS не является правильным инструментом. Добавьте некоторый javascript для выполнения этой задачи, это будет лучше, поскольку, к примеру, он не заботится о масштабировании текста пользователя (что, возможно, сломало бы "решение CSS" ).

var el = document.getElementsByClassName('myClass')[0].children[0].children[1];
var text = el.innerHTML;
el.innerHTML = text.replace('?','-->');

См. DEMO для решения vanilla js.

Хотя даже лучше было бы найти источник вопросительного знака ?, похоже, что есть некоторая проблема кодирования (utf-8?).


Теперь есть способ сделать это только с помощью css. Вы должны использовать js. НО если этот символ был заключен в

?
, например, вы могли бы сделать это: http://jsfiddle.net/csdtesting/uc8h6pz2/


Используя чистый css, вы можете это сделать, но только если знак вопроса находится в одной и той же позиции каждый раз:

<div>
 <ul>
 <li>Login to your account</li>
 <li>Visit the Accounts ? Invoices page</li>
 <li>Click the <span>Pay Now</span> button</li>
 </ul>
 </div>
.replace{
 position: relative;
}
.replace:after{
 position: absolute;
 content: '-->';
 background: #fff;
 left: 120px;
 top: 0;
 font-size: 12px;
}

скрипт: http://jsfiddle.net/kw4838dt/


Вы могли бы очень легко сделать то же самое с небольшим количеством javascript (JQuery). Я не знаю, может ли css выполнить этот вид сотрудников из коробки. Вы можете взглянуть на следующую ссылку, хотя, al меньше freamw


Вы не можете сделать это с помощью CSS, но вы можете попробовать его с помощью HTML. Посмотрите на следующее:

––>

Это сделает "- > "

Надеюсь, что это было полезно

licensed under cc by-sa 3.0 with attribution.