جار التحديث ...
جار التحديث ...

كيف يمكنني تغيير لون النقطة في القوائم ul ?

  • 0

مرحباً , اريد تغيير لون النقاط التي تكون موجودة في القوائم الغير مرتبة ul , هل من طريقة بدون استعمال الجافاسكريبت ؟

إجابات المستخدمين (3)


  • عضو أكاديمي
  • قديم العهد
  • قبل أشهر 9
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>testing</title>
    <style>
        /*
        ul {
            color: red;
        }

        li:first-line {
            color: green
        }
        */
        ul li {
            color: black;
            list-style-type: none;
        }

        ul li:before {
            content: '\2022 ';
            color: red;
            padding-right: 5px;
        }
    </style>
</head>

<body>
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</body>

</html>

  • 3
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
  • شريك الإطلاق
  • عضو جديد
  • قبل أشهر 9
ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* تغيير اللون */
  display: inline-block; /* لعمل فواصل بين النقاط */
  width: 1em; /* عمل فاصل بين النقاط والكتابة */
}
/* مزيد من التفاصيل ادخل هذا الرابط
https://www.w3schools.com/howto/howto_css_bullet_color.asp
*/

  • 3
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد

/**
 * Change bullet color of list item by replacing it with CSS
 */


ul li {
  color: #3c3c3c; 
  /* set color of list item text */

  list-style: none; 
}

 ul li::before {
  color: #006b6e;  
  /* color of bullet or square */

  content: "\2022"; 
  /* Unicode of character to precede the list item */

  font-size: 1em; 
  /* em or %*/
 
  padding-right: 1.1225em; 
  /* use em*/

  position: relative;
  top: 0em; 
  /* use em or % */

}

 


  • 3
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
سجل الدخول لاضافة اجابة جديدة