مشكلة في عدم ظهور تنسيقات خاصية after في CSS

يرجى إرفاق شيفرة HTML المتعلقة بالمشكلة كاملة نصيًا ضمن السؤال حتى نتمكن من المساعدة

بتاريخ 3 ساعات قال Hassan Hedr:

يرجى إرفاق شيفرة HTML المتعلقة بالمشكلة كاملة نصيًا ضمن السؤال حتى نتمكن من المساعدة

تفضّل.

<div class="section-4">

        <h1 class="section-heading">Contact</h1>

   

        <div class="form-section">

            <img src="./img/form-img.png" alt="">

            <form action="">

                <input type="text" placeholder="Your Name">

                <input type="email" placeholder="Your Email">

                <textarea placeholder="Your Message"></textarea>

                <input type="submit" value="Send">

            </form>

            <input type="submit" value="Send me a letter" class="showForm">

           

        </div>

       

</div>

بتاريخ 38 دقائق مضت قال محمود سعداوي:

تفضّل.

<div class="section-4">

        <h1 class="section-heading">Contact</h1>

   

        <div class="form-section">

            <img src="./img/form-img.png" alt="">

            <form action="">

                <input type="text" placeholder="Your Name">

                <input type="email" placeholder="Your Email">

                <textarea placeholder="Your Message"></textarea>

                <input type="submit" value="Send">

            </form>

            <input type="submit" value="Send me a letter" class="showForm">

           

        </div>

       

</div>

 

في CSS لا يمكن استخدام المحدد after للعناصر مثل input، لحل المشكلة يمكنك وضع العنصر input ضمن حاوية بالصنف submit-wrapper و استهداف تلك الحاوية بالمحدد after وتنسيقها كما المطلوب كالتالي:

<div class="submit-wrapper">
  <input type="submit" value="Send me a letter" class="showForm" />
</div>

وفي CSS

.form-section .submit-wrapper::after {
 ..           ^^^^^^^^^^^^^^^
}

في هذه الحالة لم تظهر .submit-wrapper input.showForm بالشكل الكامل

.submit-wrapper {

    position: absolute;

}

.submit-wrapper input.showForm{

    border: none;

    width: 20%;

    padding: 10px 2px;

    background-color: #fff;

    color: rgb(145, 181, 189);

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    text-align: center;

    z-index: 20;

}

بتاريخ 36 دقائق مضت قال محمود سعداوي:

في هذه الحالة لم تظهر .submit-wrapper input.showForm بالشكل الكامل

.submit-wrapper {

    position: absolute;

}

.submit-wrapper input.showForm{

    border: none;

    width: 20%;

    padding: 10px 2px;

    background-color: #fff;

    color: rgb(145, 181, 189);

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    text-align: center;

    z-index: 20;

}

عذرا لقد تم جاوز الخطأ.