কীভাবে কেবল একটি থেকে আন্ডারলাইন সরিয়ে ফেলা যায়?

Question 1

আমার কাছে একটি :beforeতীর প্রয়োগ করার জন্য স্টাইলযুক্ত লিঙ্কগুলির একটি সেট রয়েছে ।

এটি সমস্ত ব্রাউজারে দেখতে দুর্দান্ত, তবে আমি যখন লিঙ্কটিতে আন্ডারলাইনটি প্রয়োগ করি তখন আমি :beforeঅংশটি (তীর) তে আন্ডারলাইন রাখতে চাই না ।

উদাহরণস্বরূপ jsfiddle দেখুন: http://jsfiddle.net/r42e5/1/

এটি কি মুছে ফেলা সম্ভব? আমি যে পরীক্ষার শৈলীর সাথে বসেছিলাম #test p a:hover:beforeতা প্রয়োগ হয় (ফায়ারব্যাগ অনুসারে), তবে আন্ডারলাইনটি এখনও রয়েছে।

এড়ানো কোন উপায়?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

স্নিপেট প্রসারিত করুন

Question 2

এটি কি মুছে ফেলা সম্ভব?

হ্যাঁ, আপনি যদি ইনলাইন উপাদানের প্রদর্শন শৈলীটি display:inline(ডিফল্ট) থেকে পরিবর্তন করেন display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

এটি কারণ সিএসএস স্পেস বলে :

যখন কোনও ইনলাইন উপাদানটিতে নির্দিষ্ট করা বা প্রচার করা হয়, এটি সেই উপাদানটির দ্বারা উত্পাদিত সমস্ত বাক্সগুলিকে প্রভাবিত করে এবং আরও ইন-ফ্লো ব্লক-স্তরের বাক্সগুলিতে প্রচার করা হয় যা ইনলাইনটি বিভক্ত করে (বিভাগ 9.2.1.1 দেখুন)। […] অন্যান্য সমস্ত উপাদানগুলির জন্য এটি যে কোনও প্রবাহিত শিশুদের কাছে প্রচারিত হয়। নোট করুন যে পাঠ্য সজ্জাটি ভাসমান এবং একেবারে অবস্থানযুক্ত বংশধরদের কাছে প্রচার করা হয় না , বা আনলিক ব্লক এবং ইনলাইন টেবিলের মতো পারমাণবিক ইনলাইন-স্তরের বংশধরের সামগ্রীগুলিতেও প্রচার করা হয় না ।

(জোর আমার।)

ডেমো: http://jsfiddle.net/r42e5/10/

_{ওরিওলকে ওয়ার্কআরউন্ড প্রদানের জন্য ধন্যবাদ যা আমাকে চশমাগুলি পরীক্ষা করতে এবং কর্মক্ষেত্রটি বৈধ কিনা তা দেখতে অনুরোধ করে।}

Question 3

IE8-11 এ একটি বাগ আছে , তাই display:inline-block;একা ব্যবহার করা সেখানে কাজ করবে না।

আমি এই বাগটির জন্য একটি সমাধান খুঁজে পেয়েছি text-decoration:underline;: সুস্পষ্টভাবে : পূর্বে-সামগ্রী এবং তারপর এই নিয়মটি দিয়ে আবার ওভাররাইট করে সেট করেtext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

এখানে কাজের উদাহরণ: http://jsfiddle.net/95C2M/

আপডেট: যেহেতু jsfiddle এখন IE8 এর সাথে কাজ করে না, কেবল এই স্থানীয় ডেমো-কোডটি একটি স্থানীয় এইচটিএমএল ফাইলটিতে পেস্ট করুন এবং আইই 8 তে এটি খুলুন:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

Question 4

আপনি :beforeউপাদানটিতে নিম্নলিখিতটি যুক্ত করে এটি করতে পারেন :

display: inline-block;
white-space: pre-wrap;

সঙ্গে display: inline-blockনিম্নরেখা দেখা যাবে না। তবে সমস্যাটি হ'ল ত্রিভুজটির পরে স্থানটি ধসে পড়ে এবং এটি প্রদর্শিত হয় না। এটি ঠিক করতে, আপনি ব্যবহার করতে পারেন white-space: pre-wrapবা white-space: pre।

ডেমো : http://jsfiddle.net/r42e5/9/

Question 5

আপনার লিঙ্কগুলিকে স্প্যানগুলিতে গুটিয়ে রাখুন এবং স্প্যানটিতে পাঠ্য-সজ্জা যুক্ত করুন: এইভাবে হোভার করুন,

a:hover span {
   text-decoration:underline;
}

আমি মনে করি আপনি যা করতে চাইছেন তাতে আমি আপনার আপত্তিটি আপডেট করেছি। http://jsfiddle.net/r42e5/4/

Question 6

পরিবর্তে ব্যবহার করার চেষ্টা করুন:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

এটা কি করবে?

Question 7

এটা ব্যবহার কর

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}