：：after で 線を引きましたが、1本だけ太くなってしまいます。どうしてでしょうか。

Question

---

    <div class="main-cont">
     <img src="top_art01_img03.png" alt="" width="665" height="400">
     <div class="news-wrap">
       <h3>新着情報</h3>
       <ul>
        <li class="news">
        <P class="date">2012年08月01日</p>
        <p class="coment">【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
        </li>
        <li class="news">
        <p class="date">2012年07月24日</p>
        <p class="coment">【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p>
        </li>
        <li class="news">
        <p class="date">2012年07月02日</p>
        <p class="coment">【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</p>
        </li>
        <li class="news">
        <p class="date">2012年06月20日</p>
        <p class="coment">【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p>
        </li>
        <li class="news">
        <p class="date">2012年06月01日</p>
        <p class="coment">ホームページをリニューアルしました。</p>
       </li>
       </ul>
     </div>
    </div>

---

.main-cont{
vertical-align: top;
width: 639px;
display: inline-block;
}
.main-cont img{
margin-left: 2px;
}
.news-wrap{
font-size:15px;
color: var(--theme_font_color);
width: 639px;
display: inline-block;
background: white;
margin-left:15px;
padding: 20px;
box-sizing: border-box;
position: relative;
}
h3{
height: 65px;
position : relative;
}
.news-wrap ul{
position: relative;
}
h3::after{
content: "";
position: absolute;
left: -5px;
top: 40px; /*下線の上下位置調整 */
width: 610px; /下線の幅/
height: 3px; /下線の太さ/
background-color:var(--theme_color); /下線の色/
}
.date{
float:left;
font-size: 13px;
height: 65px;
font-weight: bold;
padding-left: 15px;
}
.coment{
float:right;
width: 430px;
height: 65px;
font-size: 13px;
padding-right: 15px;

}
.news{
position: relative;
height: 65px;
overflow: hidden;
}

.news::after{

content: " ";
position: absolute;
left: -5px;
top: 48px; /*下線の上下位置調整 */
width: 610px; /下線の幅/
height: 1px; /下線の太さ/
background-color:var(--theme_font_color); /下線の色/
display: block;
}

Comments

[maisumakun]

他に適用されているスタイルはありませんか？そのまま入力したところ、画像の状態にならず、問題の線そのものが出ない状態に陥りました。

https://jsfiddle.net/q9uoz3k6/

[hatena19]

カスタムプロパティ var() の定義がないので線が表示されませんね。
適当に定義を追加して確認してみまたが、下線は表示されますが特定の線が太くなるという現象は発生しませんでした。
現象が発生するHTML、CSSコードを提示してください。
https://codepen.io/hatena19/pen/yLOXQea

[dit.]

念のためブラウザのズーム値が変わっていないか（拡大縮小されていないか）もご確認ください。
こちらで確認したところGoogle Chromeで125%にしたところくらいから線幅にムラが出ました。

Answer 1

恐らく使っているブラウザのレンダリングによる、誤差調整の視覚効果だと思われるんですが、
要するに、1px表示が表示ピクセル間に入って座標位置によって四捨五入で数値が膨らんでいるのではないでしょうか？

再現性がなかったので、正確にはわかりませんが、

afterの疑似要素でposition:absoluteの背景色で行っているのを、border-bottomで実現したほうがスマートでいいのではないでしょうか？

表示位置をづらいしたい場合は、margin-bottomでちゃんと要素間の調整をすると、以下のようなbefore-afterにしてみました。

[before]

.news{
position: relative;
height: 65px;
overflow: hidden;
}

.news::after{

content: " ";
position: absolute;
left: -5px;
top: 48px; /*下線の上下位置調整 */
width: 610px; /*下線の幅*/
height: 1px; /*下線の太さ*/
background-color:var(--theme_font_color); /*下線の色*/
display: block;
}

[after]

.news{
  position: relative;
  height: 48px;
  overflow: hidden;
  border-bottom:1px solid red;
  margin-bottom:17px;
}

::after疑似要素は使わなくて、.newsセレクタのみで調整をしてみたので、こちらで試してみてください。

おそらく、罫線が部分的に太くなる現象も解消すると考えています。