"Text-Decoration" و ": بعد" العنصر الزائف، إعادة النظر

Question

أنا أعيد طرحه هذا السؤال لأن إجاباتها لم تنجح في حالتي.

في StyleSheet الخاص بي للوسائط المطبوعة، أريد إلحاق عنوان URL بعد كل رابط باستخدام :after الطبقة الزائفة.

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
}

في فايرفوكس (وربما كروم ولكن ليس IE8)، text-decoration: none يتم تجاهله، وتمتد التأكيد بشكل غير مناسب عبر الجزء السفلي من عنوان URL. ال color ومع ذلك يتم تعيينه بشكل صحيح إلى الأسود لعنوان URL. هل هناك طريقة لجعل text-decoration الشغل؟

ال السؤال الأصلي إلحاق الصور ذات الحجم الثابت بدلا من نص عرض متغير. تستخدم إجاباتها صور الحشو والخلفية لتجنب الاضطرار إلى استخدام خاصية Decoration Text. ما زلت أبحث عن حل عندما يكون المحتوى نص عرض متغير.

Answer 1

تنفيذ IE8 لل: قبل و: بعد العناصر الزائفة غير صحيحة. Firefox، Chrome و Safari جميع تطبيقه وفقا لمواصفات CSS 2.1.

5.12.3: قبل و: بعد العناصر الزائفة

": قبل" و ": بعد" العناصر الزائفة يمكن استخدامها ل إدراج ولدت المحتوى قبل أو بعد محتوى العنصر. وبعد يتم شرحهم في القسم على النص الذي تم إنشاؤه.

...

أوراق النمط المتتالية المستوى 2 مراجعة 1 (CSS 2.1) المواصفات

تشير المواصفات إلى أنه يجب إدراج المحتوى قبل أو بعد محتوى العنصر, ليس العنصر (بمعنى آخرu003Celement>المحتوى: قبل المحتوى المحتوى: بعد ذلكu003C/element>). وبالتالي، في Firefox و Chrome، فإن Decoration Decoration الذي تواجهه ليس في المحتوى المدرج ولكنه بدلا من عنصر مرساة الأصل الذي يحتوي على المحتوى المدرج.

أعتقد أن خياراتك ستستخدم تقنية الخلفية - صورة الحواد المقترحة في سؤالك السابق أو ربما لفت عناصر المرساة الخاصة بك في عناصر تمتد وتطبيق العناصر الزائفة على العناصر الممتدة بدلا من ذلك.

Answer 2

كما ترى display: inline-block على ال :after الزائفة، و text-decoration الإعلان سيعمل.

تم اختباره في Chrome 25، Firefox 19

Answer 3

كان لدي نفس المشكلة وكان الحل الخاص بي لتعيين الارتفاع و إخفاء الفائض

http://jsfiddle.net/r45l7/

a {
    text-decoration: underline;
}

a:after {
    content: "»";
    display: inline-block;
    text-decoration: none;
    height:16px;
    overflow: hidden;
    padding-left: 10px;
}

يعمل على IE، FF، Chrome.

Answer 4

كبديل، يمكنك استخدام حد أسفل بدلا من زخرفة نصية. هذا يفترض أنك تعرف لون الخلفية

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:after {
  content: "foo";
  border-bottom: 1px solid white; /* same color as the background */
}

Answer 5

كان الشيء الوحيد الذي عمل بالنسبة لي كان يعلن تحديد محدد متكرر منفصل مع نفس خاصية الديكور النصية التي كانت تروجها من والديها، ثم في المحدد الرئيسي، قم بوضع نصوص نصية إلى لا شيء.

على ما يبدو لا يعرف ما يجب القيام به عند تعيين text-decoration: none على عنصر pseudo دون هذا العنصر الذي تم الإعلان عن خاصية الديكور النصي (أي افتراضيا، لم يكن له شيء أعلن افتراضيا). هذا من المعنى القليل لأنه من الواضح أنه يجري الموروثة من الوالد، لكن للأسف، الآن لدينا متصفحات حديثة.

span.my-text {
  color: black;
  font-size: 12px;
  text-decoration: underline;
}

span.my-text:after {
  text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}

span.my-text:after {
  color: red;
  text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}

Answer 6

ما أقوم به هو أن أضيف غضبا داخل العنصر، مثل هذا:

<a href="http://foo.bar"><span>link text</span></a>

ثم في ملف CSS الخاص بك:

a::after{
  content:" <" attr(href) "> ";
  color: #000000;
}

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

Answer 7

أدرك أن هذا لا يجيب على السؤال الذي تطرحه، ولكن هل هناك سبب لا يمكنك استخدام ما يلي (backgroundالنهج الموضعي):

a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}

بقدر ما أعرف، تنفيذ فايرفوكس :after يلاحظ خاصية فئة محدد، وليس فئة PSuedo. قد يستحق تجريب مع مواطنين مختلفة، رغم ذلك؟ إن الانتقال، وليس الصارم، يسمح في بعض الأحيان بنتائج مختلفة (وإن لم يكن دائما أفضل النتائج...).

يحرر:

يبدو أن استخدام

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
    background-color: #fff; /* or whatever colour you prefer */
}

تجاوز، أو على الأقل الجلود، text-decoration. وبعد هذا لا يوفر حقا أي نوع من الإجابة، ولكن على الأقل يوفر حلدا للفرات.

Answer 8

يمكنك توصيل الروابط التلقائية بملفات PDF بواسطة:

a[href$=".pdf"]:after { content: ... }

أي أقل من 8 يمكن تمكينها للعمل بشكل صحيح عن طريق تنفيذ هذا الرابط في رأس ملف HTML:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

إنه يعمل أيضا جيد جدا في إصدارات AL IE عند استخدام علامات اقتباس DosPlaying بعد الظهر.

Answer 9

ضع المحتوى على أنه متابع

a {
    position: relative;
    margin: 0 .5em;
    font-weight: bold;
    color: #c00;
}
a:before,
a:after {
    position: absolute;
    color: #000;
}
a:before {
    content: '<';
    left: -.5em;
}
a:after {
    content: '>';
    right: -.5em;
}

هذا يعمل بالنسبة لي في Firefox 3.6، لم يتم اختباره في أي متصفحات أخرى رغم ذلك، حظا سعيدا!

Answer 10

مرحبا، كنت تواجه مشكلة مع هذا وكذلك حدث للتعثر عبر الحل البديل.

للحصول على حولها، لفت عنوان URL في DIV واستخدمت شيئا مثل هذا.

.next_page:before {
    content: '(';
}

.next_page:after {
    content: ')';
}

Answer 11

1)

:after{
    position: absolute;
}

ليست مثالية، لأن محتوى العنصر لن يلتف

2)

:after{
    display: inline-block;
}

ليست مثالية، لأننا في بعض الأحيان نتمنى بعد أن تغتف المحتوى دائما مع الكلمة الأخيرة من محتوى العناصر.

في الوقت الحالي، لم أتمكن من العثور على حل مثالي يناسب جميع الشروط الثلاثة (1. يمكن للمحتوى التلقائي التفاف إذا كان الوقت قد طويل جدا 2. يجب أن يلتف المحتوى مع محتوى العناصر، مما يعني بعد أن لا يشغل المحتوى واحدا من قبله. 3 يجب أن تنطبق Decoration الزخرفة فقط على شرط العنصر لا تنطبق على المحتوى بعد.) أنا أفكار الآن باستخدام طريقة أخرى لتقليد من زخرفة النص.