html css 疑似要素 before after画面からはみ出る

Question

お世話になっております。
掲題の件につきまして画像を添付いたします。

画面幅を狭くしていくとオレンジ色のブラケットが画面から隠れてしまいます。

width 100% max-widthなど相対的な幅を指定するには
どのようにしたらよいのか不明なためご教示いただきたいと
考えております。

<div class="second-message-warpper">
    <div class="second-message-warpper-title">
        <div class="Orekakko-wrapper">
            <h2>エンジニアとして本当の自由を手に入れるためには？</h2>
          </div>
![イメージ説明](4f296faa5cc86f0e3dfa7fb4efbbf67c.png)div>
</div>

.Orekakko-wrapper{
  max-width: 100%;
  width:959px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.Orekakko-wrapper::after,
.Orekakko-wrapper::before{
  content: "";
  width: 50px;
  height: 50px;
  max-width: 100%;
  position: absolute;
  display: inline-block;
}
.Orekakko-wrapper::before{
  border-top :4px solid #EBB94D;
  border-left: 4px solid #EBB94D;
  top: -35px;
  left: -53px;
}
.Orekakko-wrapper::after{
  border-bottom :4px solid #EBB94D;
  border-right: 4px solid #EBB94D;
  bottom: -25px;
  right: -50px;
}
.Orekakko-wrapper h2{
  font-size: 28px;
  margin-bottom: 35px;
}

お手数ですが、よろしくお願いいたします

Comments

[miyabi_pudding]

コード内の
div>
はなんでしょうか？
これがそのままHTMLに記載されているのでしょうか？

[退会済みユーザー]

おそらく</div>のところに誤って画像を挿入したんだと思います。

[yasutomi]

こちらの修正をお願いします。
div>

Answer 1

CSSをこのように書き換えればきれいに表示可能です。

.Orekakko-wrapper {
  max-width: 100%;
  width: 959px;
  margin: 0 auto;
  padding: 20px 30px;
  position: relative;
  box-sizing: border-box;
}
.Orekakko-wrapper::after,
.Orekakko-wrapper::before {
  content: "";
  width: 50px;
  height: 50px;
  max-width: 100%;
  position: absolute;
  display: inline-block;
}
.Orekakko-wrapper::before {
  border-top :4px solid #EBB94D;
  border-left: 4px solid #EBB94D;
  top: 0;
  left: 0;
}
.Orekakko-wrapper::after {
  border-bottom :4px solid #EBB94D;
  border-right: 4px solid #EBB94D;
  bottom: 0;
  right: 0;
}
.Orekakko-wrapper h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
}

Comments

[gomakasu423]

ご回答ありがとうございました。

Answer 2

疑似要素「before」「after」は、自身の大きさは調整可能ですが、そのスペースを確保しないので、その分を基準となる要素の親要素にパディングで持たせる必要があります。

以下を追加してみてください。

* {
  margin: 0;
  padding: 0;
}

.second-message-warpper-title {
  padding: 35px 50px 25px 53px;
}

※paddingの数値は、「position: absolute;」の位置に合わせています。

または、疑似要素ではなく、通常の要素として設定する、のどちらかになります。