CSS를 사용하여 문자 절반의 스타일을 지정하는 방법

이 글에서는 주로 가로 및 세로 절반, 가로 및 세로 3분의 1 등의 효과를 달성하는 반 문자 스타일을 설정하는 순수 CSS 구현을 소개합니다. 도움이 필요한 친구는 stackoverflow에서 볼 수 있는 질문을 참조할 수 있습니다.

방법 많은 전문가들이 답변을 주었습니다. 나는 단지 기다리고 배우고 지켜볼 것이다.
One: 기본 솔루션: html:

79128b707bc5d3919ddcdd09293e6cadX54bdf357c58b8a65c66d7c19c8e4d114
903faa1dbae0d270ff09b50d4b48b2caY54bdf357c58b8a65c66d7c19c8e4d114
90bcc9ebcf701d9a4d07c15b1f400c1aZ54bdf357c58b8a65c66d7c19c8e4d114
33b877cafda44bf9d3f1ff0d02485bcbA54bdf357c58b8a65c66d7c19c8e4d114

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;
}

효과는 그림과 같습니다.

이 방법은 동적 텍스트 또는 단일 문자에 사용되며 자동으로 적용됩니다. 당신이 해야 할 일은 대상 텍스트에 클래스를 추가하는 것뿐입니다. 그러면 나머지는 알아서 처리됩니다.

동시에 원본 텍스트의 접근성은 유지되며 시각 장애인이 사용하는 화면 판독기로 인식할 수 있습니다.

단일 문자 구현:

순수한 CSS. 당신이 해야 할 일은 스타일 문자의 절반을 렌더링하려는 모든 요소에 .halfStyle 클래스를 적용하는 것뿐입니다.

문자를 포함하는 각 범위 요소에 대해 data-content="X"와 같은 데이터 속성을 추가하고 .halfStyle:before와 같은 방식으로 의사 요소에 content:attr(data-content)를 사용할 수 있습니다. 클래스는 동적이므로 각 인스턴스에 대해 하드코딩할 필요가 없습니다.

아래에서 다른 효과를 직접 테스트해 보세요. . .

2개: 활을 좌우로 열고 양쪽에 스타일을 설정합니다.
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 */
}

3개: 가로 반쪽 스타일 설정
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 */
}

4개: 스타일 thehorizontal third
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 */
}

Five: Vertical thirds style
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 */
}

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 주목해주세요!

위 내용은 CSS를 사용하여 문자 절반의 스타일을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!