CSS text-decoration প্রোপার্টি দিয়ে টেক্সট সজ্জা (আন্ডারলাইন, ওভারলাইন, স্ট্রাইকথ্রু)

text-decoration একটি শর্টহ্যান্ড প্রোপার্টি যা তিনটি সাব-প্রোপার্টি নিয়ন্ত্রণ করে:

• text-decoration-line — লাইন টাইপ: underline, overline, line-through, none
• text-decoration-color — লাইনের রঙ
• text-decoration-style — লাইন স্টাইল: solid, double, dotted, dashed, wavy

উদাহরণ ১: ওভারলাইন + আন্ডারলাইন

<!DOCTYPE html>
<html>
<head>
<style>
.demo { text-decoration: overline underline; }
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

উদাহরণ ২: পৃথক প্রোপার্টি ব্যবহার (ভার্টিকাল রাইটিং মোডে)

<!DOCTYPE html>
<html>
<head>
<style>
p {
  writing-mode: vertical-rl;
  text-decoration-line: overline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p>This is demo text.</p>
</body>
</html>

নোট: text-decoration-skip-ink: auto (ডিফল্ট) দিয়ে ডিসেন্ডার গ্লিফের সাথে লাইন ওভারল্যাপ রোধ করা যায়।