سلام خدمت دوستان و استاد صالحی عزیز.

برای اینکه توی تایتل‌های هر بخش اون دو تا نوار نارنجی دقیقا درست قرار بگیرن و حتی اگه متن تایتل طولانی‌تر یا کوتاه‌تر شد مشکلی پیش نیاد و هر دفعه نخواییم مجدد تنظیم کنیم فقط کافیه در اون بخشی از استیل نویسی که داریم برای span از شبه المنت before و after استفاده میکنیم و در در هر کدوم مقدار right رو تعیین میکنیم برای حل مشکل بیاییم در before از همون right استفاده کنیم اما در after از right استفاده نکنیم بلکه از left استفاده کنیم. فقط کافیه یکبار مقداری که خوب تراز میشه رو لحاظ کنید بعد دیگه هیچ موقع حتی اگه در جایی دیگه استفاده کنید خراب نمیشه.

یعنی اینطوری:

امیدوارم کدها درست کپی پیست بشه (:

.section-title span::before{

content: "";

width: 40px;

height: 3px;

background-color: orange;

position: absolute;

top: 10px;

right: -50px;

}

.section-title span::after{

content: "";

width: 40px;

height: 3px;

background-color: orange;

position: absolute;

top: 10px;

left: -50px;

}