梦魂

CSS伪元素,GET,::before、::after还真是好用啊

伪元素:before:after可以做的东西是相当惊人的。对于页面上的每一个元素,你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能,而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例,你想看的话就接着往下看吧。

多重背景画布

伪元素

因为你可以将伪元素相对于它们的父类元素绝对定位,你可以想象成每个元素都有两个额外的层。Nicolas Gallagher向我们展示了它的很多种应用,包括多边界、模拟CSS3多重背景、等高栏等。

增加单个元素能创建的形状数目

伪元素

这上面所有的形状都可以只用一个元素创建,而且更加实用。相对于那些使用1700个div元素来“用纯CSS做一个咖啡杯”的事情,很整齐,但不实用。

这是一个六角星的示例:

CSS

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}

在打印网页时显示链接的URL

伪元素

CSS

@media print {
  a[href]:after {
    content: " (" attr(href) ") ";
  }
}

清除浮动

伪元素

相比插入额外的非语义标记来清除内联元素的浮动,我们可以使用一个伪元素来完成。俗称“clearfix”,并且使用”group”这个类名也更语义化。

CSS

.group:before,
.group:after {
  content:"";
  display:table;
}
.group:after {
  clear:both;
}
.group {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

模拟float:center;

伪元素

float属性实际上并没有center这个值,尽管我们可能非常需要。float虽然有左浮动和右浮动,但是我们通过使用占位伪元素也可以在两个容器之间占一块位置,并放上一个图像,我们可以看一下效果

使用对应的语言标记代码块

伪元素

这个站点的当前设计是,使用伪元素通过不同的语言来标记代码块。

HTML

<pre rel="CSS"></pre>

CSS

pre:after {
  content: attr(rel);
  position: absolute;
  top: 22px;
  right: 12px;
}

创建一个完整的图标集

伪元素

Nicolas Gallagher再次把他的idea提升到了创建一大组图标。没有使用任何图片,每两个元素(最多)只有伪元素。

更高效地使用有限的空间

伪元素

使用CSS有所得,也必然有所失。我的意思是伪元素的内容可以通过媒体查询有选择地应用或删除。如果空间是有限的,你可能会应用图标,而如果有更多空间的话就可以使用一个更具描述性的单词。

适用内容多的布局

伪元素

如果你的伪元素是文本,它们继承了和它们的父元素相同的布局样式。但是当你设置它们的内容时,你也可以编辑它们的样式。比如说,使用不同的字体和不同的颜色来让你的标题脱颖而出。

CSS

h2 {
  text-align: center;
}
h2:before, h2:after {
  font-family: "Some cool font with glyphs", serif;
  content: "\00d7";  /* Some fancy character */
  color: #c83f3f;
}
h2:before {
  margin-right: 10px;
}
h2:after {
  margin-left: 10px;
}

创建和浏览器等宽度的条

伪元素

当你需要适应浏览器宽度的背景,但是元素的内容又不够将其撑开时,你往往会使用非语义化的内联元素包裹或重复且繁琐的间距声明。或许你可以试试使用元素来限制内容的宽度来模拟效果,通过设置伪元素的宽度让标题栏延伸出边界。

创建一个body边框

伪元素

在左边和右边设置普通的border,在顶部和底部固定伪元素条的位置。完全不使用任何专门的标记,我们就可以得到一个“body border”的效果

CSS

body:before, body:after {
  content: "";
  position: fixed;
  background: #900;
  left: 0;
  right: 0;
  height: 10px;
}
body:before {
  top: 0;
}
body:after {
  bottom: 0;
}
body {
  border-left: 10px solid #900;
  border-right: 10px solid #900;
}

做一个闪烁的按钮

伪元素

做一个有从白色到透明渐变的伪元素块,把它放在button外边,然后在鼠标悬停时让它从button上过渡移动,这样在鼠标悬停时,你可以得到一个看起来似乎抓到了一点光的按钮。只有Firefox、chrome 26+和IE10+支持。

Anton Trollbäck写的原版效果,Nicolas Gallagher用伪元素写的版本,我自己写的另一个版本

在特殊链接被鼠标悬停时将页面淡出

伪元素

如果你没有给元素设置相对定位,绝对定位的伪元素就会相对于下一个父元素定位。如果没有写其它的内容,它就会相对于根元素定位。你可以使用它来做一个填充浏览器窗口的元素,将其相对叠齐在主元素下,然后在鼠标悬停于链接上时显示它,做一个页面淡出的效果

将header做成三维丝带的样式

伪元素

丝带大家都很喜欢!查看一下这个示例的HTML和CSS片段。它使用了一个负的z-index,这在某些情况下需要额外的包裹元素,以防止失去背景不透明的父元素下方的元素。

为有序列表的数字设置样式

伪元素

你试过为有序列表的数字编写样式吗?你还是做着这些繁琐的事情,比如把他们包裹在span内,为列表项写样式,然后跟着span一起把样式删除。或是胡乱地使用背景图像。或是移除列表样式,然后放进你自己的数字。这些方法都是非常糟糕的。最好是使用伪元素来作为计数器

让数据表可响应

伪元素

在小屏幕上浏览大型的数据表是很可怕的。它们要么是被放大,并要求水平和垂直滚动,要么是缩得太小,无法阅读。我们可以把CSS媒体查询和伪元素结合起来,使数据表迅速反应并格式化成一个在小屏幕上更具可读性的表格。

创建样式化的提示

伪元素

使用HTML5数据属性,然后将该属性导入并设置样式为一个伪元素,这样我们就可以使用CSS来创建完全自定义的提示

在导航item之间添加分隔符

伪元素

如果你想将nav item之间相互分隔开,你的选择是有限的:你可以添加一个边框(很无聊),或是在每个项目之间添加额外的标记(也很无聊)。伪元素可以让你在项目之间使用任何内容来作为分隔。

CSS

.menu li:before {
  content: "// ";
  position: relative;
  left: -1px;
}

做一个完全没有HTML的网站

伪元素

凭借浏览器自动插入<html>, <head><body>标签的功能,Mathias Bynens展示了如何只使用CSS和伪元素创建网站

构建仅用CSS编写的字体

伪元素

对每个字母,使用一个HTML元素(包括伪元素)。Yusuke Sugomori通过CSS构建了一整套字体,命名为CSS Sans。这个交互式的demo,可以让你看到Yusuke用于构建字母的所有巧妙技术(如rotate(旋转)、border-radius(圆角半径)、skew(倾斜)等)。

这套字体仅包括了大写拉丁字母,而且非常可爱!CSS Sans项目是一个很棒的建立在各种约束上的富有创造力的演示!

本文根据@Chris Coyier的《A Whole Bunch of Amazing Stuff Pseudo Elements Can Do》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://css-tricks.com/pseudo-element-roundup/

 

译文出处:http://www.w3cplus.com/css3/pseudo-element-roundup.html

129 thoughts on “CSS伪元素,GET,::before、::after还真是好用啊

  1. Hey just wanted to give you a quick heads up. The text in your content seem to be running
    off the screen in Internet explorer. I’m not sure if this is a format issue or something to do with browser compatibility
    but I figured I’d post to let you know. The design and style look great though!
    Hope you get the problem solved soon. Kudos

  2. Terrific work! That is the type of information that
    are meant to be shared across the net. Shame on the search engines for
    no longer positioning this put up upper! Come on over and discuss with my
    site . Thank you =)

  3. Hello! I’ve been following your blog for
    a long time now and finally got the bravery to
    go ahead and give you a shout out from Houston Texas!
    Just wanted to mention keep up the fantastic job!

  4. Hi would you mind letting me know which web host you’re using?
    I’ve loaded your blog in 3 different browsers and
    I must say this blog loads a lot quicker then most. Can you recommend a good internet hosting provider at a fair price?
    Thanks, I appreciate it!

  5. I seriously love your site.. Pleasant colors & theme.
    Did you create this amazing site yourself? Please reply back as I’m trying to
    create my own blog and would like to learn where you got this from or just what the theme
    is named. Kudos!

  6. Greetings from Florida! I’m bored at work so I decided to check out your website on my iphone during lunch
    break. I love the information you present here and can’t wait
    to take a look when I get home. I’m surprised at how quick your blog loaded on my phone ..

    I’m not even using WIFI, just 3G .. Anyways, wonderful blog!

  7. I’ve been browsing online greater than 3 hours as of late,
    but I never found any fascinating article like yours. It is lovely
    value sufficient for me. In my opinion, if all webmasters and
    bloggers made good content as you did, the net might be a lot more useful
    than ever before.

  8. I love your blog.. very nice colors & theme. Did you design this website yourself or did you hire someone to do it for you?
    Plz answer back as I’m looking to create my own blog and would like to know where u got
    this from. kudos

  9. I have been surfing online more than 3 hours today, yet I never found any interesting article like
    yours. It is pretty worth enough for me. Personally, if all site owners and bloggers made good content as
    you did, the web will be much more useful than ever before.

  10. I have been surfing on-line greater than 3 hours today,
    but I never discovered any attention-grabbing article like yours.
    It’s pretty value enough for me. In my view,
    if all website owners and bloggers made good content as you probably
    did, the internet will likely be a lot more useful than ever before.

  11. Pingback: sildenafil citrate
  12. Pingback: tadalafil generic
  13. It is perfect time to make some plans for the future and it’s time to be
    happy. I have read this post and if I could I desire to suggest you few interesting things or advice.
    Maybe you can write next articles referring to this article.

    I desire to read even more things about it!

  14. It’s perfect time to make a few plans for the future and
    it’s time to be happy. I have learn this publish and if I could I desire to counsel
    you some fascinating issues or suggestions. Maybe you could write next articles referring to this article.
    I wish to learn more issues approximately it!

  15. Hi, I do believe this is an excellent web site. I stumbledupon it 😉
    I may revisit yet again since i have saved as a favorite it.
    Money and freedom is the best way to change, may you be rich and continue to guide others.

  16. Pingback: buy cialis
  17. It’s a shame you don’t have a donate button! I’d most certainly donate to this outstanding
    blog! I guess for now i’ll settle for bookmarking
    and adding your RSS feed to my Google account.

    I look forward to brand new updates and will talk about this blog with my Facebook group.
    Chat soon!

  18. It’s appropriate time to make some plans for the future and it is time to be happy.
    I have read this post and if I could I wish to suggest you few interesting things or advice.

    Perhaps you can write next articles referring to this
    article. I wish to read more things about it!

  19. Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is wonderful, let alone the content!

  20. Hello there! This post could not be written any better! Reading this post reminds me of my good old room mate! He always kept talking about this. I will forward this page to him. Fairly certain he will have a good read. Thank you for sharing! ccgkbfgebgedfedf

    1. Heey thre wopuld you mnd styating whch blog platfoorm
      you’re using? I’m planjing too start mmy ownn blog iin tthe near fufure butt I’m haqving a
      hrd time slecting betqeen BlogEngine/Wordpress/B2evolution annd Drupal.
      Thee reason I assk is beecause youyr design seems diffeerent thdn mkst
      blogs and I’m loojing for something unique. P.S My aologies foor gwtting off-topic bbut I
      hhad too ask!

    2. It is perfect time to make a few plans for the future and it is
      time to be happy. I have read this put up and
      if I may just I want to recommend you some fascinating issues or advice.

      Maybe you can write subsequent articles referring to this article.

      I desire to read more things about it!

    3. I have been browsing online more than 4 hours today, yet I never found any interesting article like yours.
      It’s pretty worth enough for me. Personally, if all web owners and
      bloggers made good content as you did, the net will be
      much more useful than ever before.

    4. I have been surfing online greater than 3 hours as of late, yet I never discovered any fascinating article like yours.
      It is lovely price sufficient for me. In my view,
      if all web owners and bloggers made just right content as you did, the internet will
      likely be much more useful than ever before.

    5. I have been surfing on-line greater than 3 hours today, but I
      by no means discovered any attention-grabbing article like yours.
      It is lovely worth enough for me. In my opinion, if all web owners
      and bloggers made good content material as you
      did, the web will likely be much more helpful than ever before.

    6. Its such as you learn my mind! You seem to know so much approximately this, like you wrote
      the e book in it or something. I think that you just can do with some percent to pressure the message house a bit,
      however instead of that, that is excellent blog. A fantastic read.

      I will certainly be back.

    7. I truly love your website.. Very nice colors & theme.

      Did you make this web site yourself? Please reply back as I’m
      planning to create my very own website and would love to learn where you got this
      from or just what the theme is named. Thank you!

    8. Hello, i read your blog occasionally and i own a similar one and i was just wondering if you get a
      lot of spam feedback? If so how do you protect against it, any plugin or
      anything you can recommend? I get so much lately it’s
      driving me mad so any help is very much appreciated.

    9. I’ll right away grab your rss as I can not to find your e-mail subscription hyperlink or newsletter service.
      Do you’ve any? Kindly permit me recognize in order that I
      could subscribe. Thanks.

    10. Wonderful website you have here but I was wanting to know if you
      knew of any forums that cover the same topics talked about here?

      I’d really love to be a part of online community where I can get responses from other experienced individuals that share the same interest.

      If you have any recommendations, please let me know.
      Thanks!

    11. I have been surfing online more than 3 hours today,
      yet I never found any interesting article like yours.
      It’s pretty worth enough for me. Personally,
      if all site owners and bloggers made good content as you did, the web will be a lot
      more useful than ever before.

    12. hello!,I love your writing so much! percentage we communicate extra approximately your article on AOL? I require an expert in this space to solve my problem. May be that is you! Taking a look forward to peer you.

    13. It’s perfect time to make some plans for the future and
      it is time to be happy. I’ve read this post and if I could I desire to suggest you
      few interesting things or tips. Maybe you can write next
      articles referring to this article. I wish to read more things about it!

    14. I’ll right away clutch your rss as I can not to find your
      e-mail subscription hyperlink or e-newsletter service. Do
      you’ve any? Kindly permit me know so that I
      may just subscribe. Thanks.

    15. Hey there would you mind letting me know which webhost you’re working with?

      I’ve loaded your blog in 3 completely different
      browsers and I must say this blog loads a lot faster
      then most. Can you suggest a good hosting provider at a honest price?
      Kudos, I appreciate it!

    16. Hi there, i read your blog occasionally and i own a similar one and i was just
      wondering if you get a lot of spam responses? If so how do you prevent it, any plugin or anything you can advise?
      I get so much lately it’s driving me mad so any help is very much
      appreciated.

发表评论

电子邮件地址不会被公开。 必填项已用*标注