「新着」マークをつけたい

![]

現在サイト模写をしているのですが、右側の元サイトのような新着マークをつけたいのですが、新着というpタグを上図のaタグの中や外に挿入してみると、元のコーディングが反映されなくなり、うまく新着マークをつけられませんでした。
どうすればつけられるのか、わかる方がいましたら、教えていただけないでしょうか？

yoshinavi

2019/05/01 00:38

どのようにコーディングしたのかを、画像ではなく、コードブロックで提示してください。また、の中に、同じの入れ子構造は不可です。「新着」として入れるのであれば、HTMLを組み直す必要があります。

ogulife

2019/05/05 03:47

すみません、ご丁寧にありがとうございます。この先、気をつけていきます。

行動規範の内容に同意します

回答2件

ベストアンサー

CSSには「擬似要素(pseudo-Element」~~「擬似クラス(Pseudo-class」~~と呼ばれるセレクターがあり、「ある要素に、文字や要素を追加でくっ付ける事ができ」ます。

実際にHTML, CSS, 表示を見比べてみて下さい。クラス.newを持つ<a>要素には「新着」のラベルが横に表示されています。

デモ

CSSに注釈も結構入れておきましたw???? 色々なプロパティを外したり付けたりして、表示がどの様に変わるか観察すると、仕組みがよく分かるかと思います。また、不明な点があれば気軽に再度質問して下さい~????

擬似要素(Pseudo-Elements)

css
1/************
2   良く使うもの まとめ
3**************/
4::before
5::after
6
7::placeholder
8
9::first-line
10::first-letter

擬似クラス(Pseudo-Classes)

css
1/************
2   良く使うもの まとめ
3**************/
4:hover
5
6:first-child
7:last-child
8:nth-child()
9
10:first-of-type
11:last-of-type
12:nth-of-type()
13
14:active
15
16:focus
17
18:root

投稿2019/04/30 20:16

編集2019/05/08 09:04

退会済みユーザー

総合スコア0

ogulife

2019/05/05 03:56

ご丁寧にありがとうございます！！！擬似要素は少し勉強したのですが、実際に使えていなかったので、とても参考になりました！また機会があればよろしくお願いします☺️

退会済みユーザー

2019/05/05 10:38

こちらこそベストアンサーありがとうございます✨ 嬉しいです☺️✨♪♪ その際はこちらこそ宜しくお願いします???? 説明スキルもっと上げておきますね????*ﾟ✨

ogulife

2019/05/08 10:57

よりわかりやすい修正ありがとうございます！！！得た知識を活かして頑張ります????

退会済みユーザー

2019/05/08 16:40

いえいえ???????? 僕、一部間違っていましたね…焦りました…((????))????照笑お互い励みましょう( ´ω`)/♪♪

行動規範の内容に同意します

疑似要素はいかがですか？

html
1<p class="last"><a>採用情報</a></p>

css
1.last a {
2    padding: 0 50px 0 0px;
3    position: relative;
4}
5.last a::after {
6    content: '新着';
7    position: absolute;
8    top: 0;
9    right: 0;
10    background: red;
11}