সিএসএস 'আন্ডারলাইন' বৈশিষ্ট্যের লাইন বেধ সম্পাদনা করুন

Question

আপনি যেহেতু সিএসএসে কোনও পাঠ্যকে আন্ডারলাইন করতে পারেন:

H4 {text-decoration: underline;}

আপনি কীভাবে আঁকানো সেই 'লাইন' সম্পাদনা করতে পারেন, লাইনে আপনি যে রঙটি পেয়েছেন তা সহজেই 'রঙ: লাল' হিসাবে নির্দিষ্ট করা যায় তবে কীভাবে একটি লাইনের উচ্চতা, অর্থাৎ বেধাকে সম্পাদনা করতে পারে?

Comments

h4 {border-bottom: 10px solid #000;}

— প্রণব 웃

@ প্রণবকাপুর - চমৎকার! এটি উজ্জ্বল, আপনাকে অনেক ধন্যবাদ। আমি এখন এই সীমানার প্রস্থকে কীভাবে 'অটো' তে সেট করব যদিও এটি কেবল এইচ 4 ট্যাগের সীমানা করে এবং ডিভযুক্ত ডিভের পুরো প্রস্থ নয়?

display:inline-blockপ্রস্থটি সেট করা আছে কিনা তা নিশ্চিত করতে আপনি যোগ করতে পারেন তবে যাইহোক, ভিতরে কোনও উপাদান ব্যবহার করা <h4>এবং অভ্যন্তরের স্টাইলিং করা ভাল better আমার উত্তর নীচে পরীক্ষা করুন।

— প্রণব 웃

@ প্রণবকপুর - ঠিক আবার! আপনি একটি সিএসএস নিনজা মত। ধন্যবাদ মানুষ. নীচে পোস্ট করা আপনার উত্তরের চেয়ে আপনি মন্তব্যটিতে দেওয়া এই উত্তরটি আমি ব্যবহার করেছি। এই ভাবে আমার মনে হয় যেহেতু আপনার পাঠ্যকে অন্য কোনও <u> ট্যাগে মোড়ানোর দরকার নেই। আপনি এটি সম্পূর্ণরূপে CSS দিক থেকে নিয়ন্ত্রণ করুন control

আন্ডারলাইন

— বেধের

Answer 1

এটি অর্জনের একটি উপায় এখানে:

এইচটিএমএল:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

সিএসএস:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

এখানে একটি উদাহরণ: http://jsfiddle.net/AQ9rL/

Comments

... বা পাঠ্যের একাধিক লাইন

— সিএফএক্স

সেক্ষেত্রে আপনাকে প্রতিটি লাইনটি পাঠ্য মোড়তে হবে, লাইন-ব্রেকের আগে এবং পরে <span>সেখানে সীমানা-নীচে প্রয়োগ করতে হবে। এটি এমন এক প্রতিক্রিয়া যা যদিও হার্ড-কোডড না হওয়া পরিস্থিতিতে বেদনাদায়ক হতে পারে।

— ফাবিয়েন

@ সিএফএক্স আপনি যদি পারেন তবে আপনি display: inline;এটি দিয়ে এখনও এটি করতে পারেন (তবে এটি তখন কোনও ধরণের ব্লক হবে না, তবে কাউকে সাহায্য করতে পারে)

— jave.web

আপনি আমার দিন তৈরি করেছেন। ধন্যবাদ

— টেসারাক্টার

এর ফলে বিন্যাসটি পরিবর্তিত হবে। একটি সীমানা অন্য উপাদানগুলিকে সরানোর জন্য বাধ্য করবে, একটি আন্ডারস্কোর থেকে আলাদা নয় যা তা করবে না।

— জোয়েল করুণুনগান

Answer 2

সম্প্রতি আমাকে এফএফের সাথে ডিল করতে হয়েছিল যা আন্ডারলাইনগুলি খুব ঘন এবং এফএফ-এর পাঠ্য থেকে খুব দূরে ছিল এবং বক্স-শেডোর জুড়ি ব্যবহার করে এটির মোকাবিলা করার আরও ভাল উপায় খুঁজে পেয়েছি:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

প্রথম ছায়াটি দ্বিতীয়টির শীর্ষে রাখা হয় এবং এভাবেই আপনি উভয়টির 'পিক্স' মান আলাদা করে দ্বিতীয়টিকে নিয়ন্ত্রণ করতে পারেন।

প্লাস: বিভিন্ন রঙ, বেধ এবং আন্ডারলাইন অবস্থান

বিয়োগ: অ-কঠিন পটভূমিতে ব্যবহার করতে পারবেন না

এখানে আমি বেশ কয়েকটি উদাহরণ তৈরি করেছি: http://jsfiddle.net/xsL6rktx/

Comments

কত ঝরঝরে। সীমানা-নীচের প্রসঙ্গে এইটির জন্য একটি সমর্থক (আমার কাছে ন্যূনতম) হ'ল "লাইন" বেধটি পাঠ্যের দিকে বৃদ্ধি পায় যা পাঠ্য এবং লাইনের মধ্যবর্তী ব্যবধানকে কম বিশাল করে তোলে।

— ভিক্টর হ্যাগকিভিস্ট

এটি করার সময় আমি আন্ডারলাইন ছাড়াও অর্ধ পিক্সেল উল্লম্ব লাইন পাই।

— ইয়েহডিকসন

দেখে মনে হচ্ছে এটি এক পর্যায়ে একটি সঠিক উত্তর ছিল, তবে আমি ক্রোম the element এ উপাদানটির প্রতিটি পক্ষের খুব খুব পাতলা উল্লম্ব রেখা পেয়েছি

— ছোট্ট মানুষটি

সাদা পরিবর্তে , স্বচ্ছ ব্যবহার কোনও পটভূমির ক্ষেত্রে ব্যবহার করবে।

— জে দধনিয়া

এটি সেরা উত্তর। এইচটিএমএল এবং খাঁটি সিএসএস সমাধানের কোনও পরিবর্তন করার দরকার নেই যা সীমানাগুলি যা করে তার অবস্থানগুলিতে পরিবর্তন করে না।

— জোয়েল করুণুনগান

Answer 3

খুব সহজ ... ছোট ফন্ট এবং আন্ডারলাইন সহ "স্প্যান" উপাদানটির বাইরে এবং বড় ফন্টের আকারের "ফন্ট" উপাদানটির ভিতরে inside

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Comments

যদি আপনি অপ্রচলিত <font>ট্যাগটিকে কোনও ট্যাগ দিয়ে প্রতিস্থাপন করেন spanতবে এটিই কেবলমাত্র উত্তরটি হবে যা আসলে প্রশ্নটিকে সম্বোধন করে।

— মাত্তেও

Answer 4

এটি করার আরেকটি উপায় হ'ল:: পরে "(সিউডো-এলিমেন্ট) আপনি যে উপাদানটিকে নিম্নরেখাঙ্কিত করতে চান তাতে ব্যবহার করা।

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Answer 5

নেই text-decoration-thicknessবর্তমানে অংশ, সিএসএস টেক্সট অলংকরণ মডিউল শ্রেনী 4 । এটি "সম্পাদকীয় খসড়া" পর্যায়ে রয়েছে - সুতরাং এটি একটি কাজ চলছে এবং পরিবর্তিত হতে পারে। 2020 সালের জানুয়ারী হিসাবে, এটি কেবল ফায়ারফক্স এবং সাফারিতেই সমর্থিত ।

পাঠ্য-সজ্জা-বেধের CSS বৈশিষ্ট্যটি কোনও উপাদানের পাঠ্যতে যেমন লাইন-থ্রো, আন্ডারলাইন বা ওভারলাইন হিসাবে ব্যবহৃত হয় সেগুলি সজ্জা রেখার বেধ বা প্রস্থ নির্ধারণ করে।

a {
  text-decoration-thickness: 2px;
}

কোডেপেন: https://codepen.io/mrotaru/pen/yLyLOgr (কেবল ফায়ারফক্স)

---

এছাড়াও রয়েছে text-decoration-color, যা সিএসএস পাঠ্য সজ্জা মডিউল স্তর 3 এর অংশ । এটি আরও পরিপক্ক (প্রার্থী প্রস্তাবনা) এবং বেশিরভাগ প্রধান ব্রাউজারগুলিতে সমর্থিত (ব্যতিক্রম এজ এবং আইআই)। অবশ্যই এটি লাইনের বেধ পরিবর্তন করতে ব্যবহার করা যাবে না, তবে আরও "নিঃশব্দ" আন্ডারলাইন অর্জন করতে ব্যবহার করা যেতে পারে (কোডেও প্রদর্শিত হয়েছে) shown

Comments

যদি ব্যবহারকারী ফায়ারফক্সে থাকে তবে সমস্ত পাঠ্য সজ্জার জিনিসগুলি অ্যাক্সেস করা যায় text-decoration। আমি জানি না এটি সবার মধ্যে অন্তর্ভুক্ত করার পরিকল্পনা করা হয়েছে কিনা, তবে যদি তা হয় তবে ভবিষ্যতে এটি খুব সুন্দর হবে। সম্পাদনা: এটি এটিকে সমর্থন করার জন্য এটি একটি কার্যকরী খসড়াtext-decoration ।

— স্ট্রাবলেসড

Answer 6

আমি এর মতো সহজ কিছু করব:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• আপনি তাদের ব্যবহার করতে পারেন line-heightবা padding-bottomতাদের মধ্যে সম্ভাব্যতা সেট করতে পারেন
• আপনি display: inlineকিছু ক্ষেত্রে ব্যবহার করতে পারেন

ডেমো: http://jsfiddle.net/5580pqe8/

Comments

দুর্ভাগ্যক্রমে, মার্জিন-ডাউনটি নেতিবাচক মান পেতে পারে না।

— soleshoe

@ সোলেশো এটি ভুল, আপনার কোনও উপাদানটির নীচে নেতিবাচক প্রান্ত থাকতে পারে।

— অ্যালেক্স

Answer 7

background-imageএছাড়াও একটি নিম্নরেখা তৈরি করতে ব্যবহার করা যেতে পারে।

এটি মাধ্যমে সরানো background-positionএবং অনুভূমিকভাবে পুনরাবৃত্তি করতে হবে । লাইনের প্রস্থটি কিছু ডিগ্রিতে সামঞ্জস্য করা যায় background-size(ব্যাকগ্রাউন্ডটি উপাদানটির সামগ্রী বাক্সে সীমাবদ্ধ)।

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

Answer 8

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

চূড়ান্ত সমাধান: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Comments

ইস্যুটির আন্ডারলাইনটি বিভিন্ন ব্রাউজারগুলি আলাদাভাবে উপস্থাপন করে।

— জোয়েল করুণুনগান

Answer 9

নতুন সিএসএস বিকল্পগুলির যাদুতে ধন্যবাদ এটি এখন স্থানীয়ভাবে সম্ভব:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

এখনও সমর্থন তুলনামূলকভাবে দুর্বল । তবে শেষ পর্যন্ত এফএফের চেয়ে এটি অন্যান্য ব্রাউজারে নেমে আসবে।

Answer 10

আমার সমাধান: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

আপনি লাইন-উচ্চতা মান, আন্ডারলাইন বেধ এবং সীমানা-নীচে দিয়ে শৈলীর সাথে আন্ডারলাইন অবস্থানটি সামঞ্জস্য করতে পারেন।

আপনি যদি কোনও href আন্ডারলাইন করতে চান তবে ডিফল্ট আন্ডারলাইন আচরণটি অক্ষম করতে সাবধান হন।