สอบถามเพิ่มรูปภาพข้างหัวข้อให้อยู่บนเส้น

[Thanapoom1514]

ผมใช้วิธี after แล้วใส่รูปภาพแต่รูปภาพมันไม่ตรงระหว่างเส้นขีด ต้องปรับยังไงให้รูปภาพบนเส้นขีด

HTML CSS-1.png (25.5 KiB) Viewed 305 times

โค้ด: เลือกทั้งหมด

.moduletable_recommended_products > .bestseller_products,
.moduletable_recommended_products > .bestseller_products,
.moduletable_recommended_products > .bestseller_products {
    position: relative;
}

.moduletable_recommended_products > h1::after,
.moduletable_recommended_products > h2::after,
.moduletable_recommended_products > h3::after {
    content: "";
    background-image: url(/images/menu/wtctool-blue.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 7px;
    right: 15px;
    width: 4em;
    height: 5em;
}

.moduletable_brand > custom ,
.moduletable_brand > custom ,
.moduletable_brand > custom  {
    position: relative;
}

.moduletable_brand > h1::after,
.moduletable_brand > h2::after,
.moduletable_brand > h3::after {
    content: "";
    background-image: url(images/menu/wtctool-red.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 28.2em;
    right: 1.5rem;
    width: 4em;
    height: 5em;
}

[tsukasaz]

รูปภาพที่กำหนดเป็น absolute ต้องอยู่ภายใน element ที่เป็น relative มันถึงจะจัดง่ายครับ

ลองแนวทางจาก https://www.w3schools.com/css/tryit.asp ... ttom_right

[Thanapoom1514]

ได้แล้วครับ

HTML CSS-1.png (41.3 KiB) Viewed 238 times

โค้ด html

โค้ด: เลือกทั้งหมด

<div class="product-topic">
    <img class="bottomRightImg" src="/images/menu/blue.png" alt=">
    <h3 class="sp-module-title">สินค้าแนะนำ</h3>
</div>

โค้ด css

โค้ด: เลือกทั้งหมด

.product-topic {
        position: relative;
        
}
.bottomRightImg {
        position: absolute;
        bottom: 0;
        right: 0;  
        height: 50px;
}
.moduletable_recommended_products > .product-topic {
        border-bottom: 5px solid #073c79;

}
 
.moduletable_recommended_products > .product-topic > h3 {
        background-color: #073c79;
        color: white;
        padding: 12px;
        border-radius: 10px 10px 0px 0px;
        font-weight: 500;
        height: 50px;
        width: 15em;
        margin-bottom: unset;
        text-align: center;
}