Question

我在div中有一个无序列表

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

我如何更换“？”在第二个li中用“ - ＆gt;”使用纯css

Answer 1

这是非常hacky，绝不是正确的方法，但它有效（但仅适用于上述确切情况）。

.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('?','-->');

有关vanilla js解决方案，请参阅 DEMO 。

尽管如此，更好的是找到问号?的来源，看起来有一些编码问题（utf-8？）。

Answer 2

您无法使用 CSS 执行此操作，但您可以使用HTML进行尝试。请看以下内容：

&ndash;&ndash;&gt;

这将使＆＃34; - ＆gt;＆＃34;

希望它有用

Answer 3

你可以用一些javascript（JQuery）来做同样的事情。我不知道css是否可以开箱即用这些人员。你可以看一下以下的链接，人less freamw

Answer 4

现在有办法用css做到这一点。你必须使用js。的 BUT 例如，如果此字符被<div class="element">?</div>括起来，您可以执行以下操作：http://jsfiddle.net/csdtesting/uc8h6pz2/

＆＃13;
＆＃13;
.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 */ }
＆＃13;
<div class="myClass"> <ul> <li>Login to your account</li> <li>Visit the Accounts <div class="element">?</div>Invoices page</li> <li>Click the <span class="bold">Pay Now</span> button</li> </ul> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 5

使用纯CSS可以做到，但只有当问号每次都在完全相同的位置时才会这样做：

<div class="myClass">
  <ul>
      <li>Login to your account</li>
      <li class="replace">Visit the Accounts ? Invoices page</li>
      <li>Click the <span class="bold">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/

使用css替换特定字符

5 个答案: