UserCSS:引用

引用を斜体にしない

そうなんです。もともと漢字の書体に、斜体という概念はないのです。

code:stylexx.css

.line .quote {

font-style: normal;

padding: .1rem 1em;

}

code:stylexx.css

.line .quote {

font-style: normal;

padding: .1rem 1em;

background: linear-gradient( to right,

red,

orange,

yellow,

green,

aqua,

blue,

purple,

red

) 0% center / 200% auto ; /* グラデーション */

padding: 0.1em 0.2em 0.1em 0.2em;

animation: rainbow 4s linear infinite;

}

@keyframes rainbow {

to { background-position-x: 200%; }

}

グラデーションテキスト版

code:style.css

.line .quote {

font-style: normal;

padding: .1rem 1em;

background: linear-gradient( to right,

red,

orange,

yellow,

green,

aqua,

blue,

purple,

red

) 0% center / 200% auto ; /* グラデーション */

padding: 0.1em 0.2em 0.1em 0.2em;

animation: rainbow 10s linear infinite;

animation-direction: reverse;

-webkit-background-clip: text; /* */

-webkit-text-fill-color: transparent; /* */

background-clip: text;

color: transparent;

}

@keyframes rainbow {

to { background-position-x: 200%; }

}

code:stylexx.css

.line .quote {

animation: huerotator 3s infinite alternate;

}

@keyframes huerotator {

0% {

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

}

100% {

-webkit-filter: hue-rotate(360deg);

filter: hue-rotate(360deg);

}

}

code:stylexx.css

.line .quote {

animation: huerotator 3s infinite alternate;

}

@keyframes huerotator {

0% {

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

}

100% {

-webkit-filter: hue-rotate(360deg);

filter: hue-rotate(360deg);

}

}

引用符の追加

code:style.css

.line .quote::before {

font-family: 'Font Awesome 5 Free';

font-weight: 900;

font-size:85%;

content: '\f10d';

vertical-align: super

}

HTML5:引用

UserCSS.icon

https://img.shields.io/badge/UserCSS-引用-1572B6.svg?logo=css3&style=for-the-badge