Question

我的页脚中有以下“链接框”：

这是 HTML ：

<div id="link-box" style="height: 80px; width: 335px;">
    <a href="index.html">
        <img src="Logo.png" style="height: 80px;">
        <h1>&nbsp;-&nbsp;<spawn class="red">Zegmaar</spawn><spawn class="blue">Bas</spawn>.nl</h1>
    </a>
</div>

我希望对文本的第一部分“  - ” /“ -”加下划线，例如不：

我认为text-decoration-skip: spaces;是实现这一目标的最简单方法，但是，几乎没有浏览器支持它。

如何获得所需的结果？

解决方案越简单，越优雅，效果越好。我只想使用CSS和HTML。

Answer 1

最干净的选择是对此链接使用自定义类

.headerLink {text-decoration:none;}

然后是要加下划线的部分的另一个类：

.headerLinkAction {text-decoration: underline;}

您可能还需要更新悬停类。

Answer 2

您可以从锚标签中删除下划线，然后对这样的单词部分使用下划线，

library IEEE;
use IEEE.STD_LOGIC_1164.ALL;
use IEEE.std_logic_unsigned.all;
use IEEE.numeric_std.all;
entity LedBlink is
Port ( 
    clk: in  std_logic;
    rst: in  std_logic;
    led_0 : out std_logic;
    led_1 : out std_logic
    );
end LedBlink;
architecture Behavioral of LedBlink 
-- Inverter.vhd
component Inverter is 
    port ( 
        Inv_in   : in std_logic;
        Inv_out  : out std_logic
        );        
end component;

constant CLK_FREQ    : integer := 12500000;
constant BLINK_FREQ  : integer := 1;
constant CNT_MAX     : integer := CLK_FREQ/BLINK_FREQ/2 - 1;
signal cnt : unsigned(24 downto 0);
signal blink_0 : std_logic := '1';
signal blink_1 : std_logic := '1';

begin

process(clk)
begin
    if (rst = '1') then
        blink_0 <= '0';
        blink_1 <= '0';        
    elsif (clk='1' and clk'event ) then
        if cnt = CNT_MAX then
            cnt <= (others => '0');          
            -- blink_1 <= blink_0;
            A1: Inverter 
                Port map ( Inv_in => blink_0, Inv_out => blink_1); 
            blink_0 <= not blink_0;                     
        else
            cnt <= cnt + 1;
        end if; 
    end if;
end process;
led_0 <= blink_0;
led_1 <= blink_1;
end Behavioral;

如果只想在悬停时显示下划线，请使用<div id="link-box" style="height: 80px; width: 335px;"> <a href="index.html" style="text-decoration:none;"> <h1> - <spawn class="red">Zegmaar</spawn><spawn class="blue" style="text- decoration: underline;">Bas</spawn>.nl</h1> </a> </div>将class用于悬停。

Answer 3

Try this:
( Removed underline )

    <div id="link-box" style="height: 80px; width: 335px;">
        <img src="Logo.png" style="height: 80px;">
        <h1>&nbsp;-&nbsp;<a href="index.html"><spawn class="red">Zegmaar</spawn><spawn class="blue">Bas</spawn>.nl</a></h1>
    </div>

从链接中部分删除下划线

3 个答案: