CSS 右对齐后的伪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11328085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pseudo after align right
提问by Charles John Thompson III
I'm trying to use the CSS3 pseudo :after on li elements. The issue is that the content of :after is immediately following the li content - as if :after uses text-align:left; But since my li elements use display:block; shouldn't using text-align:right; on :after move the :after content all the way to the right? It doesn't anyway.
我正在尝试在 li 元素上使用 CSS3 伪 :after 。问题是 :after 的内容紧跟在 li 内容之后 - 就好像 :after 使用 text-align:left; 但是由于我的 li 元素使用 display:block; 不应该使用 text-align:right; on :after 将 :after content 一直向右移动？反正也没有。
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
}
.container ul li:after {
content: ">";
text-align: right;
}
This is a screen shot of the issue:
这是问题的屏幕截图：
I want the > to be all the way at the right, and since the content of the li changes, I can't set a width on the :after content.
我希望 > 一直在右侧，并且由于 li 的内容发生了变化，因此我无法在 :after 内容上设置宽度。
How would I get the :after content to align to the right, if not with text-align?
如果不使用文本对齐，我将如何使 :after 内容向右对齐？
回答by Sowmya
Try float:
尝试浮动：
.container ul li:after {
content: ">";
text-align: right;
float:right;
}
回答by Rohit Azad
Hey now you can used positionproperties as like this:
嘿，现在你可以position像这样使用属性：
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
position:relative;
}
.container ul li:after {
content: ">";
position:absolute;
left:20px;
top:5px;
}
and change to css properties according your design.
并根据您的设计更改为 css 属性。
Live demo: http://tinkerbin.com/yXzOyDNg
现场演示：http: //tinkerbin.com/yXzOyDNg
If you want to right align than change leftinto right
如果您想右对齐而不是更改left为right
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
}
.container ul li:after {
content: ">";
position:absolute;
right:20px;
top:5px;
}
Live demo: http://tinkerbin.com/rSWKxLwX
现场演示：http: //tinkerbin.com/rSWKxLwX
回答by Anna F?rber
Use float:rightand special line-heightfor vertical alignment.
使用float:right和特殊line-height的垂直对齐方式。
.container ul li {
display: block;
border-bottom: 1px solid rgb(60,60,60);
border-top: 1px solid rgb(255,255,255);
padding: 5px 5px 5px 30px;
font-size: 12px;
width: 100%;
}
.container ul li:after {
content: ">";
float: right;
line-height: 12px;
}
