如何使用CSS實現設定半個字元的樣式

來源:互聯網
上載者:User
這篇文章主要介紹了純CSS實現設定半個字元的樣式,分別實現了水平和垂直一半、水平和垂直三分之一等效果,需要的朋友可以參考下

在stackoverflow上看到的問題怎麼給半個字元設定樣式,很多大神給出了答案。我就等就來學習圍觀吧。
一:基本解決方案:html:

<span class=”halfStyle” data-content=”X”>X</span><span class=”halfStyle” data-content=”Y”>Y</span><span class=”halfStyle” data-content=”Z”>Z</span><span class=”halfStyle” data-content=”A”>A</span>

css:

.halfStyle {position:relative;display:inline-block;font-size:80px; /* or any font size will work */color: black; /* or transparent, any color */overflow:hidden;white-space: pre; /* to preserve the spaces from collapsing */}.halfStyle:before {display:block;z-index:1;position:absolute;top:0;left:0;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;color: #f00;}

效果

這種方法用於任何動態文本或單個字元,並且都是自動適用的。所有你需要做的就是在目標文本上添加一個class,剩下的就解決了。

同時,保留了原文的可訪問性,可以被盲人或視障人士使用的螢幕助讀程式識別。

單個字元的實現:

純CSS。所有你需要做的就是把.halfStyle class用在每個你想要渲染一半樣式字元的元素上。

對於每個包含字元的span元素,你可以添加一個data屬性,比如data-content=”X”,並且在虛擬元素上使用content:attr(data-content);這樣,.halfStyle:before class將會是動態,你不需要為每個執行個體進行寫入程式碼

以下其它效果自行測試了。。。

二:左右開弓,兩邊都設定樣式
更改CSS:

.halfStyle {position:relative;display:inline-block;font-size:80px; /* or any font size will work */color: transparent; /* hide the base character */overflow:hidden;white-space: pre; /* to preserve the spaces from collapsing */}.halfStyle:before { /* creates the left part */display:block;z-index:1;position:absolute;top:0;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #f00; /* for demo purposes */text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the right part */display:block;direction: rtl; /* very important, will make the width to start from right */position:absolute;z-index:2;top:0;left:50%;width: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #000; /* for demo purposes */text-shadow: 2px 2px 0px #0af; /* for demo purposes */}

三:設定水平一半的樣式
CSS:

.halfStyle {position:relative;display:inline-block;font-size:80px; /* or any font size will work */color: transparent; /* hide the base character */overflow:hidden;white-space: pre; /* to preserve the spaces from collapsing */}.halfStyle:before { /* creates the top part */display:block;z-index:2;position:absolute;top:0;height: 50%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #f00; /* for demo purposes */text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the bottom part */display:block;position:absolute;z-index:1;top:0;height: 100%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #000; /* for demo purposes */text-shadow: 2px 2px 0px #0af; /* for demo purposes */}

四:水平三分之一的樣式
css:

.halfStyle { /* base char and also the bottom 1/3 */position:relative;display:inline-block;font-size:80px; /* or any font size will work */color: transparent;overflow:hidden;white-space: pre; /* to preserve the spaces from collapsing */color: #f0f;text-shadow: 2px 2px 0px #0af; /* for demo purposes */}.halfStyle:before { /* creates the top 1/3 */display:block;z-index:2;position:absolute;top:0;height: 33.33%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #f00; /* for demo purposes */text-shadow: 2px -2px 0px #fa0; /* for demo purposes */}.halfStyle:after { /* creates the middle 1/3 */display:block;position:absolute;z-index:1;top:0;height: 66.66%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #000; /* for demo purposes */text-shadow: 2px 2px 0px #af0; /* for demo purposes */}

五:垂直三分之的樣式
css:

.halfStyle { /* base char and also the right 1/3 */position:relative;display:inline-block;font-size:80px; /* or any font size will work */color: transparent; /* hide the base character */overflow:hidden;white-space: pre; /* to preserve the spaces from collapsing */color: #f0f; /* for demo purposes */text-shadow: 2px 2px 0px #0af; /* for demo purposes */}.halfStyle:before { /* creates the left 1/3 */display:block;z-index:2;position:absolute;top:0;width: 33.33%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #f00; /* for demo purposes */text-shadow: 2px -2px 0px #af0; /* for demo purposes */}.halfStyle:after { /* creates the middle 1/3 */display:block;z-index:1;position:absolute;top:0;width: 66.66%;content: attr(data-content); /* dynamic content for the pseudo element */overflow:hidden;pointer-events: none; /* so the base char is selectable by mouse */color: #000; /* for demo purposes */text-shadow: 2px 2px 0px #af0; /* for demo purposes */}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.