hover مشکل با hover در css

[unid_user 63]

سلام دوستان

من میخوام وقتی روی تگ p در اصطلاح hover میکنم. محتوایی که در before نوشتم تغیرات دلخواه رو انجام بده. ولی اصلا کار نمیکنه! لطفا کمک کنید.

<div class="text-right text-border">
                <h4>آموزش ربات مسیرباب</h4>
                <p>
                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
              </div>

این هم از کدهای css

.text-border p::before {
  content: "مقاله آموزشی";
  position: absolute;
  width: auto;
  height: auto;
  background-color: darkgoldenrod;
  top: -10px;
  left: 5px;
  border-radius: 2px;
  z-index: -1;
  padding: 0px 10px;
}
.text-border p:hover .text-border p::before {
  top: -20px;
}

 

ویرایش شده اسفند 96 توسط masoudch

[فرحان 997]

سلام. به این صورت بنویسید:

.text-border p:hover:before {
  top: -20px;
}

 

[unid_user 63]

سلام دوستان

نمیشه برای تگ های img و h1 تا h6 از before و after استفاده کرد؟ من هرکاری کردم نمیگرفتن و باید به یه div قبل از اونها before و after می دادم؟؟!

ممنون

[mehran-b 2385]

در 14 دقیقه قبل، masoudch گفته است :

نمیشه برای تگ های img و h1 تا h6 از before و after استفاده کرد؟ من هرکاری کردم نمیگرفتن و باید به یه div قبل از اونها before و after می دادم؟؟!

به تگ img نمیشه Pseudo Element داد ولی به تگ های هدینگ (H1 تا H6) مشکلی نداره میشه داد.