“之后”的样式在浏览器中有所不同

Question

我使用:after在输入框后显示星号。不同的浏览器会以不同的方式呈现样式。如何让它在所有浏览器中看起来都相似。请在不同的浏览器中查看此Fiddle，您可以在其中看到差异。

Answer 1

您可以设置a：的宽度和高度，并为输入提供自定义样式（以避免填充，边框等方面的差异）

http://jsfiddle.net/omLc9nfe/7/

.a:after{
    content:'*';
    display:inline-block;
    position:absolute;
    top:-8px;
    right:-8px;
    width:8px;
    height:8px;
    text-align:center;
}
.a{
    position: relative;
    display:inline-block;
}
input {
    border:1px solid #ccc;
    margin:0;
    padding:2px;
}

我已经使用safari，firefox和chrome进行了检查。