是否可以使用CSS来更改伪元素data-URI中的SVG路径的颜色？

<a href="http://externalurl/">External Site</a>

CSS:

a[href^="http://"]:after { content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); }
a[href^="http://"]:hover:after path { fill: #000; }

为了分离导航中的链接,我设置了以下内容

#menu-main li a:after{
    content: " * ";
}

当前项目获得额外的

text-decoration: underline;

我现在的问题是,"*"也有下划线,但不应该

我试过补充一下

#menu-main li a:after{
    text-decoration: none !important;
}

但它没有效果

有没有人知道如何保持文字下划线但不是:内容后？

我知道这里有很多关于这个问题的问题但是没有一个能为我提供解决方案.

HTML

<input id="tb1" type="text" class="note" />

<br>

<p class="note1"> This is not done.</p>

CSS

p.note1:before{
    content: "Note:";
}

tb1.note:before{
    content: "Enter your number";
}

我正在尝试使用上面的代码和在网络上找到的变体,但似乎没有一个适用于输入标签.它适用于p标签.

编辑:我无法为输入标签添加值属性并管理所需结果的css.这是系统的局限性.

编辑2:忘记我的CSS,有没有什么方法可以使用占位符文本而不使用占位符属性和只是普通的CSSinput type="text"

我正在使用css的组合:before并:hover在按钮中添加图像.

我遇到的问题是,当我将鼠标悬停在:before元素上时,它会正确触发图像位置更改但不会li:hover创建:before元素.我猜测这是因为:before元素位于其上方的方式li,然后阻止:hover被触发.

这是一张图片,可以更好地解释发生的事情:

这是我的css:

.columnStat ol li {
    list-style: none;
    margin-right: 3px;
    display: inline-block;
}
ol, ul {
    list-style: none;
}

#page .columnStat ol {
    margin: 0px 8px;
    padding-top: 8px;
}

body {
    line-height: 1;
}
html, body {
    height: 100%;
}
body {
    margin: 10px 10px;
    color: rgb(35, 35, 35);
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 0.75em;
}
a {
}
a:link {
    color: …

有没有办法使用CSS将after伪元素的内容设置为同级表单元素的属性？

例如：

p:after{
  content: +select(attr(title));
}

<p>Message: </p>

<select>
  <option title="Hi" value="1">Hi</option>
  <option title="Hello" value="2" selected>Hello</option>
  <option title="Goodbye" value="3">Goodbye</option>
</select>

在此示例中，所需的渲染输出为： Message: Hello

如果当前无法做到这一点，那么CSS4（或5？）规范中是否有任何计划允许在content属性中使用选择器？

我有一个jQuery解决方案，但是我很好奇这是否可以不用javascript吗？

我在UI开发方面没有太多经验.我有一个在CSS中定义的类,类似于此 -

.myclass {
    color: red;
    content: "my content";
    font-size: 12px;
    padding-right: 2px;
}

我希望"my content"价值得到国际化(用英语显示我的内容,用另一种语言显示其他内容).这有可能通过CSS代码实现吗？

例子：

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

当它被渲染时，计算出的 CSS 就是那个值。

content: var(--PrimaryThemeColor);

即使我使用的后处理器将计算值作为后备注入，值本身也不是字符串，因此对于content.

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}

我想使用字体字符（例如来自 font-awesome）作为输入元素的背景图像。

<style>
#id {
    background-image: content('\f2d3'); /* content instead of url() */
    background-position: right center;
}
</style>

<input id="test" />

我的猜测是我要么将角色保存为图像，要么使用伪元素:after与内容和足够的定位来实现这一点。只是想看看是否有更好的解决方案。是否可以访问 SVG 中的字符并使用内联 SVG 作为内容？

更新：

我用 SVG 做了一个部分解决方案（参见https://fiddle.jshell.net/92h52e65/4/），但仍然存在使用正确字体的问题。

<style>
#input1 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="30px" height="20px"><text x="5" y="15" font-family="FontAwesome">x&#xf2d3;</text></svg>');
  background-position: right center;
  background-repeat: no-repeat no-repeat;
}
</style>

<input id="input1" placeholder="insert some text here" size="30" required />

为了在 IE 和 FF 中工作，我必须使用 base64 编码而不是 utf8。我把 utf8 留在这里是为了让它更具可读性。

我正在为网站编写自定义主题，因此无法使用 Javascript。我想将一些数字转换为罗马数字。

我试过这个：

.score:before {
  counter-reset: mycounter attr(score number, 0);
  content: counter(mycounter, upper-roman) " ";
}

 <p><span class="score" score="11">points</span></p>

唉，似乎“attr(score number, 0)”总是0。这不是因为回退，因为当我将回退数字更改为42时，结果仍然是0。这在代码中的其他地方不是问题，因为当我attr(...)用 42 这样的数字替换时它工作得很好。

那么为什么这段代码没有显示出它应该显示的内容呢？

我有以下文字：

<span class="page-number">42</span>

我想创建一个伪元素，如下所示：

<span class="page-number">42</span>

这样伪元素的内容就是元素的文本，在本例中为 42。我可以通过一些技巧来做类似的事情吗？