كيف يمكنني إدراج نص جديد مع ارتباط تشعبي في صفحة في CSS؟

Question

قل لدي الرمز التالي:

...
<div id="originalContent">Foo</div>
...

كيف يمكنني استخدام CSS لإدراج "شريط" بعد "foo" وجعل "شريط" ارتباط تشعبي ، مثل هذا:

... فو شريط...

أعلم أن هذا سيكتب "Foo Bar":

#originalContent:after { content: " Bar"; }

لكن لا يمكنني معرفة كيفية جعل "شريط" ارتباط تشعبي. أيه أفكار؟

Answer 1

على حد علمي ، لا يمكنك فعل ذلك مع CSS فقط. ولكن ، حتى لو استطعت ، ما زلت أوصي باستخدام JavaScript بدلاً من ذلك. يجب استخدام CSS فقط لتحديد معلومات النمط والتخطيط.

من السهل إلى حد ما إلحاق رابط إلى Div باستخدام JavaScript ، خاصة إذا كنت تستخدم مكتبة. إليك مثال باستخدام jQuery:

$("#originalContent").append("<a href='bar.html'>Bar</a>");

في حال كنت لا ترغب في استخدام مكتبة ، إليك مثال باستخدام عمليات DOM الأصلية:

var link = document.createElement("a");
link.href = "bar.html";
link.appendChild(document.createTextNode("Bar"));  // This sets the link's text
document.getElementById("originalContent").appendChild(link);

كما ترون أن استخدام عمليات DOM الأصلية هو عمل أكثر قليلاً ، ولكن إذا كانت هذه هي وظيفة JavaScript الوحيدة التي تحتاجها ، فقد لا يستحق تنزيل مكتبة كاملة.

Answer 2

لا يمكنك فعل هذا. الروابط ليست خصائص CSS.