相关疑难解决方法(0)

我试图:after在input字段上使用CSS伪元素,但它不起作用.如果我使用它span,它可以正常工作.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

这是有效的(在"buu!"之后和"更多"之前放置笑脸)

<span class="mystyle">buuu!</span>a some more

这不起作用 - 它只用红色调色someValue,但没有笑脸.

<input class="mystyle" type="text" value="someValue">

我究竟做错了什么？我应该使用另一个伪选择器吗？

注意:我不能添加span我的input,因为它是由第三方控件生成的.

我正在尝试使用:before和:after列表,但它不起作用.我确信这是一个简单的错误,但我无法指出它.

任何帮助,将不胜感激

请检查小提琴

<div class="org-chart">
  <ul class="chart chart-prhead">
    <li>
      <span><a href="#">Dabba</a></span>
      <ul class="chart-mgr">
        <li>
          <!-- level 2 -->
          <span><a href="#">Dabba</a></span>

        </li>

      </ul>
    </li>
  </ul>
</div>

.chart ul:after {
  border: 1px solid #f30;
}
.chart li span:after {
  border: 1px solid #eee;
}
.chart li span:before {
  border: 1px solid #ccc;
}
.chart li a:after {
  border: 1px solid #666;
}
.chart li a:before {
  border: 1px solid #333;
}

鉴于以下场景,为什么:after选择器需要内容属性才能运行？

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}

<div class="test"></div>

注意在指定content属性之前如何看不到伪元素:

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}

<div class="test"></div>

为什么这是预期的功能？你会认为显示块会强制元素出现.奇怪的是,您实际上可以在Web调试器中看到样式; 但是,它们不会显示在页面上.

只是玩:before和:after.

看来我不能用它/用input按钮？以为我可以使用它确实为必填字段显示星号.不一定是我要做的,只是一个选择

input {
    position: relative;
}
input:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;
}

相同的代码工作正常 li

li {
    clear: both; 
    margin: 0 0 10px; 
    position: relative;
}
li:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;   
}