要素の位置調整について

h4クラスの「NEW」の左右に疑似要素で上に開いた斜め線をいれて、文字を強調したいのですが、「NEW」にtext-align:center;やalign-item:center;をかけても中央に移動しません。
また、疑似要素の線も回転しません。（今記述してあるrotateの数値は適当です）
他にもbuttonタグの「もっとみる」を右寄せしたいのですが、これも変化しません。

-実行したいこと
・NEWの中央ぞろえ
・文字強調のための斜め線
・buttonタグをPC表示でもSP表示でも要素の中で右寄せしたい
この三点になります。

位置の調整については、思いつくプロパティを色々いれてみましたが変化しませんでした。
疑似要素の回転については、調べてでてきたコードをいれてみたところ（positionを使った指定）、斜線自体はできましたが要素が画面いっぱいになっていて文字からかなり離れるか、文字に寄せるとNEWの位置自体が中央揃えでなくなりました。

複数質問になってしまいますが、一つでもいいので回答いただければと思います。
よろしくお願いします。

画像のように配置したいです。

HTML

        <div class="other-wrapper">

           <div class="other-article">
               <h2 class="article-title">
               <span><time datetime="2025-08-25">2025.08.25</time>【メディア取材のお知らせ】</span><br>
                ATB「ひるまるっ！」で私たちの商品が紹介されました
               </h2>
               <ul class="link">
                 <li><a href="#">#MEDIA</a></li>
                 <li><a href="#">#2025</a></li>
               </ul>
                 <button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
           </div>

           <div class="other-article">
             <h2 class="article-title">
             <span><time datetime="2025-08-25">2025.08.25</time>【雑誌掲載のお知らせ】</span><br>
             雑誌『美人百花』に掲載していただきました
           </h2>
            <ul class="link">
               <li><a href="#">#MEDIA</a></li>
               <li><a href="#">#2025</a></li>
            </ul>
            <button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
           </div>

           <div class="other-article">
             <h2 class="article-title">
             <span><time datetime="2025-08-25">2025.08.25</time>【催事出店】</span><br>
             日本橋三越本店フランス展２０２５
           </h2>
            <ul class="link">
               <li><a href="#">#MEDIA</a></li>
               <li><a href="#">#2025</a></li>
            </ul>
            <button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
           </div>
                  
 </section>

CSS

.other .new{
display: inline-block;
font-size: 20px;
font-weight: 600;
align-items: center;
margin-bottom: 2rem ;
text-align: center;
}

.other .new::before{
content: "";
width: 30px;
height: 10px;
border-left: 3px solid #333;
padding-right: 16px;
transform: rotateY(-30deg);
}

.other .new::after{
content: "";
width: 30px;
height: 10px;
border-right: 3px solid #333;
padding-left: 16px;
}

.other-wrapper{

}
.other-article{
width: 100%;
margin: 16px 0;
border-bottom: #999 1px solid;
}

@media(width > 800px){
.other-wrapper{
display: flex;
align-items: center;
justify-content: space-around;
}
.other-article{
width: 27%;
margin: 16px 0;
}

}

.other-wrapper h2 span{
font-size: 14px;
}
.other-article ul{
display: flex;
color: blue;

}
.other-article li{
font-size: 14px;
margin-right: 24px;
}
.other-article button{
display: inline;
justify-content: center;
}
.other-article .more{
margin-top: 10px;
margin-bottom: 8px;
border: #999 1px solid;

}

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

回答1件

Windows 11、Edge、Chrome、Firefoxで確認しました。

とりあえず、一番簡単なNEWのセンタリングの件のみです。
align-itemsやtext-alignは、親要素に指定します。

CSS
1.other{
2    text-align: center;
3}
4
5.other .new{
6    display: inline-block;
7    font-size: 20px;
8    font-weight: 600;
9    margin-bottom: 2rem;
10}

(追記)
斜線は、文字でいいと思います。
CSSから、.other .new::before、.other .new::afterは削除します。

html
1<section class="other"> <h4 class="new">＼ NEW ／</h4>

(さらに追記)
ボタンの右寄せも、NEWのセンタリングと考え方は同じです。
親要素を追加します。

html
1<div class="button-wrapper">
2<button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
3</div>

CSS
1.button-wrapper{
2    text-align: right;
3}
4
5.other-article .button-wrapper .more{
6    margin-top: 10px;
7    margin-bottom: 8px;
8    border: #999 1px solid;
9}

投稿2025/10/04 10:32

編集2025/10/04 12:08

hiroki-o

総合スコア1642

mimimon

2025/10/04 12:23

迅速な回答ありがとうございます。アドバイスのように親要素を作って指定したらそれぞれ位置の指定ができました。最初「NEW」は「other-wrapper」の中にはいっており、そこで親に指定したら子要素すべてがセンタリングしたので、wrapperからだして単独で指定できないか考えていました。改めて、回答ありがとうございました。