我怎样才能得到这个效果:
<pre class="default prettyprint prettyprinted" data-codetitle="homepage.html" style=""><code>
body{
position: relative;
@include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%)
$half, $darkbackground $half, $darkbackground));
color: $text;
width: 100%;
height: 100%;
@include breakpoint(baby-bear) {
@include background(linear-gradient(left, lighten($me, 11%), lighten($me, 11%)
45%, $darkbackground 45%, $darkbackground));
}
}
</span></code></pre>
Run Code Online (Sandbox Code Playgroud)
我需要使用数据标记作为标题:
.prettyprint {
margin: 0 0 0 0.5%;
border-left: 2px solid #ce8f80;
overflow: auto;
position: relative;
width: 300px;
}
.prettyprint:before {
content: attr(data-codetitle);
background: #ce8f80;
display: block;
width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
这是结果.问题是当你滚动时,:before元素也会滚动.有没有办法保持这个元素的固定.我试过不同的变化,但我不能让它工作.
谢谢
这是一个我不太了解的关于z-index和css伪元素:: before/:: after的行为.
它在这个jsfiddle上有说明:http://jsfiddle.net/jgoyon/T6QCf/
我创建了一个定位框并使用:: after伪元素添加内容(也定位).
#no-z-index {
background:lightblue;
width:100px;
height:100px;
position:relative;
}
#no-z-index:after {
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
}
Run Code Online (Sandbox Code Playgroud)
#z-index {
background:lightblue;
left:200px;
width:100px;
height:100px;
position:relative;
z-index:0; /* parent z-index */
}
#z-index:after {
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
}
Run Code Online (Sandbox Code Playgroud)
这是预期的行为吗?
我的段落的高度/行高为50px text-align: center,它使文本居中.但是p:之前导致它的高度/行高增加,导致文本崩溃.我想要p和p:才能垂直居中.
<p>Hover This</p>
p {
background: red;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 14px;
}
p:hover:before {
content: "icon";
display: inline-block;
margin-right: 10px;
font-size: 3em;
}
Run Code Online (Sandbox Code Playgroud)
文字长度各不相同所以我认为我不能只position: absolute用于图标......
我试图在我的元素中显示两件事; 的class名称和自己创建的data-size变量.与一个白色空间分开.
我可以这样做:
.element:before {
content: attr(class);
}
.element:after {
content: attr(data-size);
}
Run Code Online (Sandbox Code Playgroud)
但它似乎不是一种正确的方法.我也试过这样做:
.element:before {
content: attr(class data-size);
}
Run Code Online (Sandbox Code Playgroud)
但那并没有奏效.
输入
HTML
<div class="element" data-size="20"></div>
Run Code Online (Sandbox Code Playgroud)
CSS
.element:before {
content: attr(class data-size);
}
Run Code Online (Sandbox Code Playgroud)
想要输出
要素20
我试图为访问链接添加一些效果,然后我遇到了这个问题.
这是代码:http://dabblet.com/gist/5447894
只有Opera才能成功更改:before伪元素的内容.所有其他浏览器都失败了.我错过了什么吗?谢谢
所以,我在输入元素上有一个自定义样式,我想在输入上放置一些文本:after.
我遇到的问题是我似乎无法改变:after元素的字体权重,这个问题只发生在元素input和:after元素的组合上.
CSS
input[type="checkbox"] { /* enable styling of the checkbox ! */
-moz-appearance: none;
-webkit-appearance: none;
}
input { /* set up some basic styles.... */
background-color:#ccc;
width:200px;
height:200px;
background-color:grey;
}
input:after { /* and we create the :after element */
width:100%;
text-align:center;
font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */
content: "This should be thin"; /* some text */
}
Run Code Online (Sandbox Code Playgroud)
的jsfiddle
测试
Chrome for mac(最新)
题
为什么我不能在:after …
在某些模板中,我看到用CSS创建的箭头.这样的事情:
div:after{
content:"\f107";
}
Run Code Online (Sandbox Code Playgroud)
此代码显示如下箭头:

这段代码是什么?在哪里可以找到更多代码?
我试图通过after属性将透明图像覆盖到另一个上面.它甚至没有出现使用这种方法.我想尽可能使用base64编码的图像.我也尝试使用常规的非编码图像.没有骰子.有人有什么想法?
我的HTML:
<div class="image-container">
<img src="images/sample.jpg" alt="Sample Image" />
</div>
Run Code Online (Sandbox Code Playgroud)
我的CSS:
.image-container {
position: relative;
width: 183px;
height: 137px;
overflow: hidden;
}
.image-container img {
position: absolute;
}
.image-container img:after {
display: block;
position: absolute;
margin-top: -50%;
width: 183px;
height: 103px;
content: url(data:image/png;base64,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) no-repeat;
}
Run Code Online (Sandbox Code Playgroud) 至于伪元素:after/ :before如果我想在那里显示图像,显然有两种方法:
background-image:url(imgurl.png);content:url(imgurl.png);两种方式都是正确有效的吗?我为什么要用另一种方式?
显然使用第二种方法无法设置图片属性,如大小.但是第一种方法通常在互联网上教授.
想法?
我只是想知道为什么在CSS中使用unicode时我不能在 unicode 之后放置空格 :
这是我的测试:
div {font-size:50px;}
div:before, div:after {color:green;}
.a:before {content: 'text-before \2022 ';}
.b:before {content: 'text-before • ';}
.c:after {content: ' \2022 text-after';}
.d:after {content: ' • text-after';}Run Code Online (Sandbox Code Playgroud)
<div class="a">A-Hello</div>
<div class="b">B-Hello</div>
<div class="c">C-Hello</div>
<div class="d">D-Hello</div>Run Code Online (Sandbox Code Playgroud)
所以你会看到B并D使用非unicode允许在char之后添加空格.但是当使用unicode(A和C)空格时就消失了.
.x:before {content: '\2022 ';}Run Code Online (Sandbox Code Playgroud)
<div class="x">Hello</div>Run Code Online (Sandbox Code Playgroud)
所以问题是:为什么以及如何在uncicode之后添加真正的空间字符(因为我们在键盘上按下空格键)?(不使用边距填充)