标签: css-content

如何在滚动元素中保持伪元素?

我怎样才能得到这个效果:

<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元素也会滚动.有没有办法保持这个元素的固定.我试过不同的变化,但我不能让它工作.

谢谢

css pseudo-element css-content

7
推荐指数
2
解决办法
3547
查看次数

元素的z-index对z-index的影响:before /:after伪元素

这是一个我不太了解的关于z-index和css伪元素:: before/:: after的行为.

它在这个jsfiddle上有说明:http://jsfiddle.net/jgoyon/T6QCf/

我创建了一个定位框并使用:: after伪元素添加内容(也定位).

  • 如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下
    #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,它就不再起作用了.
    #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)

这是预期的行为吗?

css z-index pseudo-element css-content

7
推荐指数
1
解决办法
2340
查看次数

CSS ::之前的伪元素行高?

我的段落的高度/行高为50px text-align: center,它使文本居中.但是p:之前导致它的高度/行高增加,导致文本崩溃.我想要p和p:才能垂直居中.

http://jsfiddle.net/MMAUy/

<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用于图标......

html css pseudo-element css-content

7
推荐指数
2
解决办法
8220
查看次数

多个内容:attr()值

我试图在我的元素中显示两件事; 的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

在这里演示

html css pseudo-element css-content

7
推荐指数
1
解决办法
5336
查看次数

无法更改被访问的内容:在伪元素之前

我试图为访问链接添加一些效果,然后我遇到了这个问题.

这是代码:http://dabblet.com/gist/5447894

只有Opera才能成功更改:before伪元素的内容.所有其他浏览器都失败了.我错过了什么吗?谢谢

css pseudo-element css-content

6
推荐指数
1
解决办法
1977
查看次数

无法在<input>元素上使用的after after元素上设置font-weight

所以,我在输入元素上有一个自定义样式,我想在输入上放置一些文本: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

http://jsfiddle.net/xQVfL/1/

测试

Chrome for mac(最新)

为什么我不能在:after …

html css css3 pseudo-element css-content

6
推荐指数
1
解决办法
954
查看次数

CSS中的content属性

在某些模板中,我看到用CSS创建的箭头.这样的事情:

div:after{
    content:"\f107";
}
Run Code Online (Sandbox Code Playgroud)

此代码显示如下箭头:

在此输入图像描述

这段代码是什么?在哪里可以找到更多代码?

css css-content

6
推荐指数
2
解决办法
8119
查看次数

图像叠加使用:在伪元素之后

我试图通过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)

html css pseudo-element css-content

6
推荐指数
1
解决办法
2万
查看次数

在使用img的内容或背景之后/之前的CSS伪?

至于伪元素:after/ :before如果我想在那里显示图像,显然有两种方法:

  1. 运用 background-image:url(imgurl.png);
  2. 运用 content:url(imgurl.png);

两种方式都是正确有效的吗?我为什么要用另一种方式?

显然使用第二种方法无法设置图片属性,如大小.但是第一种方法通常在互联网上教授.

想法?

css css3 pseudo-element css-content

6
推荐指数
1
解决办法
2269
查看次数

为什么我在开启之后不能使用空格:之前:使用unicode之后的内容

我只是想知道为什么在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)


所以你会看到BD使用非unicode允许在char之后添加空格.但是当使用unicode(AC)空格时就消失了.

.x:before {content: '\2022 ';}
Run Code Online (Sandbox Code Playgroud)
<div class="x">Hello</div>
Run Code Online (Sandbox Code Playgroud)

所以问题是:为什么以及如何在uncicode之后添加真正的空间字符(因为我们在键盘上按下空格键)?(不使用边距填充)

css unicode char css-content

6
推荐指数
1
解决办法
633
查看次数

标签 统计

css ×10

css-content ×10

pseudo-element ×8

html ×4

css3 ×2

char ×1

unicode ×1

z-index ×1