CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの::beforeおよび::after疑似要素

CSS::beforeとCSS::after Pseudo-elementは、要素の前後にそれぞれコンテンツを挿入するために使用されます。

例

CSS::beforeとCSS::after疑似要素の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
   content: " BUZZINGA!";
   background: orange;
   padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
   content: "Harry:";
   background-color: lightblue;
   font-weight: bold;
   padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Nobody: </p>
<p>Sheldon Cooper:</p>
</div><hr><div>
<p><q>Death Eaters arrive</q></p>
<p><q>Expecto Patronum!</q></p>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの::beforeおよび::after疑似要素

例

CSS::beforeとCSS::after疑似要素の別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<title>Center Alignment using CSS Margin</title>
<style>
#yinyangSymbol {
   width: 100px;
   height: 50px;
   background: #fff;
   border-color: #000;
   border-style: solid;
   border-width: 2px 2px 50px 2px;
   border-radius: 100%;
   position: relative;
}
#yinyangSymbol::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   background: #fff;
   border: 18px solid #000;
   border-radius: 100%;
   width: 14px;
   height: 14px;
}
#yinyangSymbol::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   background: #000;
   border: 18px solid #fff;
   border-radius:100%;
   width: 14px;
   height: 14px;
}
div{
   width: 50%;
   margin: 10px auto;
   border:4px solid black;
}
#text {
   border: 4px solid black;
   background-color: grey;
   color: white;
   text-align: center;
}
</style>
</head>
<body>
<div id="main">
<div>
<div id="yinyangSymbol"></div>
</div>
<div id="text">Be Centered & Balanced</div>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

CSSの::beforeおよび::after疑似要素


  1. CSSの::first-letter疑似要素

    このCSS疑似要素は、要素のコンテンツの最初の文字を選択します。ただし、要素がインラインレベルの場合、これは機能しません。 例 CSS::first-letter疑似要素-の例を見てみましょう <!DOCTYPE html> <html> <head> <style> div{    background-color: #32485d;    border: 5px solid black;    color: #959799; } p::first-letter {   &

  2. CSSのborder-styleプロパティ

    CSS border-styleプロパティは、要素の境界線スタイルを指定するために使用されます。また、border-topスタイル、border-rightスタイル、border-leftスタイル、border-rightスタイルのプロパティを使用して、個々の辺の境界線スタイルを定義することもできます。 構文 CSSボーダープロパティの構文は次のとおりです- Selector {    border: /*value*/ } 次の例は、CSSボーダースタイルのプロパティ-を示しています。 例 <!DOCTYPE html> <html> <