zoukankan      html  css  js  c++  java
  • Pseudo-elements ::before, ::after 範例

    xhtml
    <strong class="amount">700</strong>
    css
    .amount::before {content:"$ ";}
    .amount::after {content:" 萬元";}
    原來只有 700 ,但加了 CSS 以後呈現會是
    $ 700 萬元

    思考 - ::before, ::after Pseudo-element Selectors 使用原則

    :: 為 CSS3 擬元素的標準表示法,主要是為了與 : 的擬類別 (Pseudo-classes) 作區分,有別於原來 CSS2 兩者同樣使用 : 表示,目前較先進瀏覽器 (firefoxoperasafari, …) 均有支援。

    ::before 搭配 contnet 特性 (property) 雙引號內所指示的字元,可在 selectors 指定的元素最前加入該字串 (包括空格,如上例的 "$ "), CSS 因而將此字串視為一個元素,所以可以賦予該字串各種設計風格; ::after 一樣用法,不同的只是加在最後。可以把上例想像成加了兩個實際的元素,如:

    xhtml
    <strong class="amount"><span>$ </span>700<span> 萬元</span></strong>

    另加一下 CSS 看看變化,

    css
    .amount {color:red;}

    這樣會是整個 $ 700 萬元 都變成紅字,因為 ::before, ::after 所加入的字串擬元素,仍屬於 .amount 元素的內容,所以依據繼承性擬元素 $, 萬元 也都是紅字了。稍微改變一下 CSS 看看:

    css
    .amount::before {content:"$ "; color:blue;}
    .amount::after {content:" 萬元"; color:blue;}

    這樣只有擬元素變成藍字,結果會像 $ 700 萬元,先前定義的紅字還是存在。 ::before::after 沒有限制兩個同時都要指定,也可以只指定一個前或一個後。

    需要注意的是,以 ::before, ::after 配合 content 所產生的擬元素字串,會視為行內層級元素 (inline emements),也就是文字層級 (text-level) 。

    至於 content 特性還有更有用的字串加入方式,由於撰文時大多瀏覽器支援不甚完全,以後再作討論,有興趣可先參考 W3C The content Property 說明。

  • 相关阅读:
    团队项目01应用场景
    团队项目冲刺第一阶段03
    团队冲刺第一阶段02
    团队冲刺第一阶段01
    基于 Scrapy-redis 的分布式爬虫详细设计
    创建CrawlSpider爬虫简要步骤
    如何将redis中的数据导入到本地MongoDB和MySQL数据库
    远程访问ubuntu下mysql的问题
    vi命令汇总
    Chrome/FireFox处理JSON的插件
  • 原文地址:https://www.cnblogs.com/web-d/p/4077060.html
Copyright © 2011-2022 走看看