CSS ::afterを指定した要素を任意の位置に移動するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
親要素にposition:relativeを指定
セレクタ::after{
position:absolute;
topとleftまたはbottomとright
}
説明
1.::afterを指定した要素の親要素にpositionプロパティのrelativeを指定します
2.::afterを指定した要素にpositionプロパティのabsoluteと位置のプロパティ(topとleftまたはbottomとright)を指定します。
使用例
<!DOCTYPE html> <html> <head> <style> /*親要素 relative*/ .parent { position: relative; } /*セレクタ:after*/ .cft::after { /*positionプロパティのabsolute*/ position: absolute; content: "12345"; color: green; top: 35px; left: 55px; } </style> </head> <body> <div class="parent"> <p class="cft">データ</p> </div> </body> </html>